Scroll Animation (GSAP + ScrollTrigger + Lenis)

If GreenSock's official skills (gsap-core, gsap-scrolltrigger, gsap-react, gsap-plugins) are installed, use them for API details; this skill covers project setup, integration and the mistakes that break real sites.

1. Install

npm i gsap lenis
npm i @gsap/react   # React / Next.js only

All GSAP plugins (ScrollTrigger, SplitText, Flip, ScrollSmoother, MorphSVG, DrawSVG…) ship in the public gsap package and are free for commercial use. Import from gsap/<PluginName> and call gsap.registerPlugin(...) once.

2. One setup module

Create lib/motion/setup.(js|ts) (or animations/) that is imported once on the client:

import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { SplitText } from "gsap/SplitText";
import Lenis from "lenis";
import "lenis/dist/lenis.css";