- What is TweenLabs?
- 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 web experiences.
- Are these GSAP components free?
- 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.
- What frameworks are supported?
- 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. - What kind of GSAP components are included?
- 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.
- How to optimize GSAP for Next.js App Router?
- 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. - How to prevent GSAP memory leaks in React?
- 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.
