1 min read

Smooth scroll without the jank: Lenis, GSAP, and responsible motion

Pairing Lenis with GSAP ScrollTrigger in Next.js while respecting reduced motion, layout stability, and mobile performance.

  • GSAP
  • Lenis
  • UX

Why smooth scroll needs a plan

Out-of-the-box scroll animations are easy to demo and hard to ship. The moment you add pinned sections, scrubbed timelines, and third-party widgets, you inherit layout thrash, scroll jank, and accessibility debt.

The stack I reach for

Lenis keeps wheel and touch movement predictable, while GSAP ScrollTrigger gives me precise control over when animations start, reverse, and clean up. The important part is wiring both to the same frame loop so ScrollTrigger never fights the scroller.

Motion with guardrails

  • prefers-reduced-motion: timelines degrade to simple fades—or static layout—without breaking layout.
  • Transform-first tweens where possible; avoid animating properties that trigger reflow on every frame.
  • Mobile: shorter distances, lighter blur, and fewer simultaneous tweens to keep frames stable on mid-tier devices.

Scroll storytelling can elevate a brand, but only when it stays fast and inclusive. That is the bar I optimize for.