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
Installs
2
First Seen
Aug 30, 2026
scroll-lenis-gsap-integration-harness — avnehsbhatia/ultraui