Best GSAP Components
for React & Next.js
A curated collection of 22 production-ready GSAP animation components you can copy-paste or install via CLI. Built for React 19, Next.js 16, and TypeScript. Every component is self-contained, accessible, and free under the MIT license.
Why GSAP for React & Next.js?
Performance
GSAP animates off the main thread using requestAnimationFrame with automatic batching. Zero layout thrashing, sub-16ms frame budgets.
ScrollTrigger
The most powerful scroll-animation engine available. Pin elements, scrub timelines, create parallax effects — all with a single plugin.
Timeline Control
Sequence complex animations with labels, staggers, and easing functions. Pause, reverse, seek — full programmatic control.
Scroll-Driven Animations
Components that animate based on scroll position using GSAP ScrollTrigger. Perfect for storytelling landing pages and immersive experiences.
Scroll Cards
Vertical scroll-pinned stacked cards container utilizing y-transform parallax staggers.
Scroll Tags
Interactive scroll-triggered tags that fly into a grid board container from all offscreen directions.
Horizontal Cards
Premium horizontal scroll layout where colorful Neo-Brutalist cards slide, float, enter from the bottom, and exit off the top of the viewport.
Page Transition
Premium stacked page-peel scroll animation where color-themed sections slide up and overlap with dynamic skewing.
Orbit Gallery
Premium scroll-driven layout where orbiting abstract cards converge into a sleek horizontal timeline.
Interactive & Mouse-Driven
Components that respond to user input — cursor position, clicks, and drags. These create engaging, tactile web experiences.
Fluid Cursor
Custom elastic lagging cursor reticle that snaps, morphs, and hugs button boundaries.
Magnetic Dock
Premium floating menu bar where buttons pull dynamically toward the user's cursor.
Bento Grid
Neo-Brutalist bento box card grid with 3D perspective mouse tilt, spring physics recovery, and vector crosshairs.
3D Carousel
Interactive 3D mathematical wheel rotation with pointer drag inertia, keyboard navigation, and GSAP details panel expansion.
Flip Cards
Interactive fanning cards and scroll-pinned cards flipping in 3D perspective space.
Typography & Text Effects
Creative text animations using GSAP timelines and SVG filters. Great for hero sections, headings, and brand statements.
Kinetic Text
Interactive kinetic text sandbox showcasing liquid wave, character scramble, and magnetic motion.
Morphing Text
Smooth auto-cycling text morphing animation with SVG threshold filter and color-coded word transitions.
Reveal Text
Premium line-by-line text reveal using SplitText masks with staggered choreography.
Border Reveal
Premium horizontal text scroll where letters fly in and out from top/bottom screen borders.
Gravity Drop
Staggered letters falling down onto a shelf collider with realistic physics bounce.
Layout & Structure
Animated layout components that bring structure and motion to your page — grids, accordions, tabs, and more.
Accordion
Vertical accordion showcase where selection morphs page background color and staggers content.
Tabs Motion
Animated tab navigation with sliding indicator pill and directional content crossfade transitions.
Blueprint
Premium page-load exploding cards and text scramble animation matching the layout of blueprintapps.io.
Circular Scatter
Circular loop scatter animation where cards stack one-by-one at screen center, then scatter to the outer edges with hero text centered.
Parallax Hero
Multi-layer parallax hero with SplitText character scatter entrance and scroll-driven depth motion.
How to Install GSAP Components
Option 1: CLI (Recommended)
Option 2: Copy-Paste
- Install dependencies:
npm install gsap @gsap/react - Click "Get Code" on any component card
- Paste the code into your project — every component is self-contained
Frequently Asked Questions
What are the best free GSAP components for React?+
TweenLabs offers 22 free, production-ready GSAP components for React and Next.js including ScrollTrigger decks, 3D carousels, morphing text effects, parallax heroes, kinetic typography, and fluid cursor animations. All components are MIT-licensed, self-contained, and installable via npx tweenlabs@latest add ComponentName.
Is GSAP better than Framer Motion for animations?+
GSAP excels at complex, timeline-based animations with ScrollTrigger, SVG morphing, 3D transforms, and physics-based motion. Framer Motion is better for simple declarative animations tied to React state. For high-fidelity scroll animations and interactive experiences, GSAP is the industry standard.
Can I use GSAP with Next.js App Router?+
Yes. Use the @gsap/react useGSAP hook inside client components (marked with "use client"). The hook automatically handles cleanup on unmount, preventing memory leaks. TweenLabs components are specifically optimized for Next.js 16 App Router.
Are these components accessible?+
Yes. All TweenLabs components respect prefers-reduced-motion, use semantic HTML, include ARIA attributes where needed, and maintain keyboard navigability.
Browse by Category
Start Building with GSAP
Browse 22 premium animation components. Pick one, install it, and ship something beautiful.
Explore All Components →