scroll-animation

Topics in the source

• Scroll Animation (GSAP + ScrollTrigger + Lenis)
• 1. Install
• 2. One setup module
• 3. Framework integration
• 4. ScrollTrigger rules that prevent 90% of bugs
• 5. Responsive & reduced motion
• 6. Performance
• 7. Verify

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. All GSAP plugins (ScrollTrigger, SplitText, Flip, ScrollSmoother, MorphSVG, DrawSVG…) ship in the public gsap package and are free for commercial use. Import from gsap/ and call gsap.registerPlugin(...) once. Create lib/motion/setup.(js|ts) (or animations/) that is imported once on the client: Use either Lenis or GSAP ScrollSmoother, not both. React / Next.js (App Router) — files using GSAP need "use client". Always use useGSAP (auto-cleanup, no double-run in Strict Mode): Event handlers that create animations: wrap with contextSafe from useGSAP. Smooth scroll provider: a client component in the root layout that calls initSmoothScroll() in an effect (or ReactLenis from lenis/react with autoRaf: false and the GSAP ticker). Route change in Next.js: scroll to top (lenis.scrollTo(0, { immediate: true })) and ScrollTrigger.refresh() after the new page mounts. Vue / Nuxt — create in onMounted inside gsap.context(() => {…}, rootEl), call ctx.revert() in onUnmounted. Nuxt: clien

This is an excerpt. Refer to the complete source and its current requirements.