Lenis Smooth Scroll Setup
The minimal Lenis initialisation snippet with autoRaf for standalone use, plus the GSAP ScrollTrigger integration pattern using lenis.on('scroll') and gsap.ticker. Covers nested scroll prevention, stop/start API, and a link to the full documentation.
Setup — External Scripts
<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lenis@1.2.3/dist/lenis.css">
<!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/lenis@1.2.3/dist/lenis.min.js"></script>Code
// Lenis
const lenis = new Lenis({
autoRaf: true,
});
// --- Using with GSAP ScrollTrigger ---
// If you use GSAP ScrollTrigger, replace the above with this pattern instead:
//
// const lenis = new Lenis();
// lenis.on('scroll', ScrollTrigger.update);
// gsap.ticker.add((time) => { lenis.raf(time * 1000); });
// gsap.ticker.lagSmoothing(0);Guide
Basic Setup
Instantiate Lenis with autoRaf: true to let Lenis drive its own requestAnimationFrame loop. This is the simplest setup and requires no additional ticker wiring.
GSAP ScrollTrigger Integration
When using GSAP ScrollTrigger, do not use autoRaf. Instead, create Lenis without it, forward scroll events to ScrollTrigger with lenis.on('scroll', ScrollTrigger.update), and drive Lenis from GSAP's ticker: gsap.ticker.add((time) => { lenis.raf(time * 1000); }). Set gsap.ticker.lagSmoothing(0) to prevent frame-lag compensation from causing scroll jumps.
Nested Scroll
For modals or other elements with overflow: scroll, add the data-lenis-prevent attribute to the scrollable element. This tells Lenis to release native scroll control inside that container.
Stop & Start
Call lenis.stop() to disable scrolling for the user — useful when opening a modal or overlay. Call lenis.start() to re-enable it.
Full Documentation
For all instance options (lerp, duration, direction, gestureDirection, smooth, smoothTouch, touchMultiplier, infinite, and more) refer to the official Lenis documentation on GitHub.