Question 1

What is TweenLabs?

Accepted Answer

TweenLabs is a dedicated front-end animation resource library featuring 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. Simply click 'Get Code' on any card, install the required packages, and drop the code directly into your codebase.

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

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, pointer drag carousel wheels, elastic fluid cursors, and animated SVG networks.

Question 5

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 6

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.

Build Something Beautiful