Question 1

What is TweenLabs?

Accepted Answer

TweenLabs is a dedicated front-end animation resource library featuring 22+ production-ready GreenSock (GSAP) components and interactive React templates. It provides web developers and UI designers with reusable, copy-paste code snippets to build high-fidelity scroll animations, creative layouts, and interactive experiences.

Question 2

Are these GSAP components free?

Accepted Answer

Yes, all TweenLabs animations and layouts are free and open-source under the MIT license. You can install any component via the CLI with npx tweenlabs@latest add ComponentName, or copy-paste the code directly.

Question 3

What frameworks are supported?

Accepted Answer

Our components are optimized for React 19, Next.js 16 (App Router), TypeScript, and Tailwind CSS. They utilize standard clean packages like @gsap/react and Lenis smooth scrolling.

Question 4

How to install TweenLabs components?

Accepted Answer

Run npx tweenlabs@latest add ComponentName in your project terminal. For example: npx tweenlabs@latest add FlipCards. The CLI downloads the component file and any required dependencies (gsap, @gsap/react) automatically.

Question 5

What kind of GSAP components are included?

Accepted Answer

TweenLabs houses a wide range of creative mechanics: 3D hover tilt grids, kinetic wave typography, scroll-pinned parallax card decks, morphing text with color transitions, pointer drag carousel wheels, elastic fluid cursors, and animated SVG networks.

Question 6

GSAP vs Framer Motion — which should I use?

Accepted Answer

GSAP excels at complex, timeline-based animations with fine-grained control — scroll-pinning, SVG morphing, 3D transforms, and physics-based motion. Framer Motion is great for declarative, layout-driven React animations. TweenLabs uses GSAP because it offers superior performance for the high-fidelity animation patterns our components require.

Question 7

How to optimize GSAP for Next.js App Router?

Accepted Answer

To optimize GSAP in Next.js App Router, run all timeline configurations inside client-side components using the useGSAP hook. Use CSS initial values for layout properties to prevent Layout Shifts (CLS), and wrap animations in media checks to respect user preferences.

Question 8

How to prevent GSAP memory leaks in React?

Accepted Answer

Always clean up your animation contexts when React components unmount. Using the official @gsap/react useGSAP helper hook automatically performs context reversion and cleanup when the component unmounts, preventing memory leaks and orphaned timelines.

All Components

[01]Flip Cards

[02]3D Carousel

[03]Skill Fit

[04]Page Transition

[05]String Line

[06]Circular Scatter

[07]Fluid Cursor

[08]Blueprint

[09]Scroll Cards

[10]Scroll Tags

[11]Orbit Gallery

[12]Gravity Drop

[13]Horizontal Cards

[14]Border Reveal

[15]Kinetic Text

[16]Magnetic Dock

[17]Bento Grid

[18]Accordion

[19]Reveal Text

[20]Tabs Motion

[21]Parallax Hero

[22]Morphing Text