Lenis Smooth Scroll Setup

Implementation

Documentation

For all instance settings please read the Lenis Documentation on Github

Nested Scroll

For modals or other elements that have overflow: scroll; add the data-attribute [data-lenis-prevent]

Stop/Pause Scroll

Call lenis.stop(); to disable the scroll for the user, for example when opening a modal.

Start Scroll

Call lenis.start(); to enable scroll again.

Scroll-To Anchor Target

For more information how to implement lenis.scrollTo(): Lenis Scroll-To Anchor Target

Using with GSAP Scrolltrigger

// Lenis (with GSAP Scroltrigger)
const lenis = new Lenis();
lenis.on('scroll', ScrollTrigger.update);
gsap.ticker.add((time) => {lenis.raf(time * 1000);});
gsap.ticker.lagSmoothing(0);