Lenis Smooth Scroll

Add buttery smooth scroll to any web app with Lenis. Configures inertia, anchor links, scroll snapping, and integrates cleanly with GSAP ScrollTrigger and Framer Motion useScroll.

This skill wires up Lenis for smooth, inertia-based scrolling that feels native on every device. It handles RAF loops, ScrollTrigger.update sync, anchor link interception, scroll-to behavior, and the gotchas around iframes, modals, and locked scroll states.

When to use

Use when adding silky scroll to a marketing site or portfolio, integrating smooth scroll with GSAP ScrollTrigger, or fixing the common pitfalls (locked body, anchor jumps, viewport units on mobile).

Examples

Lenis + GSAP ScrollTrigger setup

Wire Lenis to drive ScrollTrigger so pinned animations stay in sync

Set up Lenis smooth scroll on a Next.js app and sync it with GSAP ScrollTrigger so pinned sections track perfectly

Anchor links with offset

Smooth-scroll to in-page anchors with a sticky-header offset

Configure Lenis to intercept anchor links with a 80px offset for the sticky header and easing duration of 1.2s