TweenLabs
A curated, premium open-source library of high-fidelity GSAP animation components and templates. Built for modern React 19 and Next.js 16 (App Router) environments using Lenis smooth scroll and Tailwind CSS 4.
Technical Stack
: Uses React Server Components (RSC) by default, client components designated with "use client".
: Standard for high-performance timeline-based web animations.
: Modern components with full type safety.
: Smooth scrolling integrated with the GSAP ticker.
: Modern utility-first styling.
: Pure static typing, zero any usage.
Development & Animation Guidelines
When writing or customizing GSAP code:
1. : Always use the
@gsap/react useGSAP hook for safe animation context cleanup and scope definition.
2. : Never call standard
gsap.to or
gsap.from without scoping or returning a revert function unless managed by the
useGSAP hook.
3. : Animate GPU-friendly properties (
x,
y,
scale,
rotation,
opacity) instead of layout properties (
width,
height,
top,
left).
4. : Always respect accessibility settings (such as checking
prefers-reduced-motion or using ARIA tags).
GSAP Component Directory
Here is the full index of high-fidelity animation components available to copy-paste.
: [/01-gravity-drop
: [/code/01-gravity-drop
: Staggered letters falling down onto a shelf collider with realistic physics bounce using custom staggers.
: [/02-scroll-tags-assembly
: [/code/02-scroll-tags-assembly
: Interactive scroll-triggered tags that fly into a grid board container from all offscreen directions.
: [/03-inward-outward-border-reveal
: [/code/03-inward-outward-border-reveal
: Premium horizontal text scroll where letters fly in and out from top/bottom screen borders.
: [/04-horizontal-cards-showcase
: [/code/04-horizontal-cards-showcase
: Premium horizontal scroll layout where colorful Neo-Brutalist cards slide, float, and exit.
: [/05-page-change-animation
: [/code/05-page-change-animation
: Premium stacked page-peel scroll animation where color-themed sections slide up and overlap.
: [/06-kinetic-typography
: [/code/06-kinetic-typography
: Interactive kinetic text sandbox showcasing liquid wave, character scramble, and magnetic motion.
: [/07-scroll-orbit-gallery
: [/code/07-scroll-orbit-gallery
: Premium scroll-driven layout where orbiting abstract cards converge into a sleek horizontal timeline.
: [/08-blueprint-scatter
: [/code/08-blueprint-scatter
: Exploding cards and text scramble page-load animations mirroring modern blueprint schemas.
: [/09-circular-scatter
: [/code/09-circular-scatter
: Circular loop scatter animation where cards stack at center, then scatter to outer bounds.
: [/10-screen-skill-fit
: [/code/10-screen-skill-fit
: Candidate profile showcase with vertical ScrollTrigger pinning and staggered technology chips.
: [/11-magnetic-dock
: [/code/11-magnetic-dock
: Premium floating dock menu bar where buttons pull dynamically toward the user's cursor.
: [/12-fluid-cursor
: [/code/12-fluid-cursor
: Custom elastic lagging cursor reticle that snaps, morphs, and hugs container boundaries.
: [/13-bento-grid-flip
: [/code/13-bento-grid-flip
: Neo-Brutalist bento grid containing perspective mouse tilt, spring physics recovery, and crosshairs.
: [/14-3d-carousel
: [/code/14-3d-carousel
: Interactive 3D mathematical wheel rotation with drag inertia, key controls, and sliding info cards.
: [/15-morphing-accordion
: [/code/15-morphing-accordion
: Vertical accordion showcase where selection morphs page background color and staggers content.
: [/16-scroll-cards-01
: [/code/16-scroll-cards-01
: Vertical scroll-pinned stacked cards container utilizing y-transform parallax staggers.
: [/17-showup-cards
: [/code/17-showup-cards
: Interactive fanning cards and scroll-pinned cards flipping in 3D perspective space.
: [/18-string-line
: [/code/18-string-line
: ScrollTriggered SVG network line drawing tracking node proximity scale offsets.