scroll-lenis-gsap-integration-harness
Installation
SKILL.md
Lenis + GSAP Integration Harness
What this builds
A production-grade harness that wires Lenis smooth scroll to GSAP ScrollTrigger, handles resize/orientation changes, cleans up on route transitions in SPAs (React, Next.js, Astro), provides a scroll-to-section navigation system, and gates the entire smooth-scroll layer behind prefers-reduced-motion. This is the foundation layer for a scroll-narrative site: every animation toolkit in the scroll category sits on top of this harness.
- Lenis instance driving smooth scroll with GSAP ticker integration (no double-rAF)
- ScrollTrigger wired to Lenis's scroll position (not native
scrollY) - Debounced resize handler that refreshes both Lenis and ScrollTrigger
- Route-change teardown for React/Next.js/Astro that kills ScrollTriggers, resets Lenis, and prevents stale references
- Scroll-to-section nav with smooth Lenis scroll and correct ScrollTrigger position updates
- Mobile strategy: Lenis disabled on touch by default (native momentum is better), ScrollTrigger still active
prefers-reduced-motion: Lenis disabled entirely, ScrollTrigger runs without smooth scroll- A complete 5-act scroll narrative skeleton wired to this harness