Lenis
~7kb gzippedLightweight smooth scroll powering modern marketing sites.
See It in Action
Each demo drives a custom scrollable container with Lenis -- feel the eased scroll and see the programmatic control CSS cannot match.
Scroll through the sections and toggle Lenis on/off to feel the difference. CSS scroll is instantaneous; Lenis interpolates every wheel tick into a smooth glide.
What is Lenis?
Lenis is a ~7kb library that replaces the browser's default scroll with a smoothed, interpolated one. When a user spins the wheel or flicks the trackpad, Lenis eases the scroll position toward the target instead of jumping -- the result is the buttery glide you see on Awwwards-winning sites and modern product pages.
Beyond feel, Lenis gives you a full API: scrollTo with custom duration and easing, a scroll event that fires on every smoothed frame (perfect for driving parallax or GSAP ScrollTrigger), and native support for prefers-reduced-motion. It's framework-agnostic and ships with no runtime dependencies.
When to Use Lenis
How Lenis Compares
CSS smooth scroll jumps to an anchor with no duration or easing control -- the browser picks the timing. Lenis gives you full control over duration, easing curves, and the programmatic API.
Locomotive is now built on top of Lenis as of v5. If you want data-attribute parallax and in-view class toggles, use Locomotive. For just smooth scroll, use Lenis directly and skip the wrapper.
ScrollSmoother is a Club GreenSock (paid) plugin. Lenis is MIT-licensed and free forever. Both handle smooth scroll; Lenis has become the default in the Awwwards/Club GSAP scene anyway.
Get Started with Lenis
npm install lenisyarn add lenis<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lenis.min.js"></script>import Lenis from "lenis";
// Smooth-scroll the whole page -- autoRaf runs the animation loop for you
const lenis = new Lenis({ autoRaf: true });
// Programmatic scroll to any element, with custom duration + easing
document.querySelector("#to-pricing").addEventListener("click", () => {
lenis.scrollTo("#pricing", {
duration: 1.2,
easing: (t) => 1 - Math.pow(1 - t, 3) // easeOutCubic
});
});
// Subscribe to every smoothed scroll frame -- great for parallax / GSAP
lenis.on("scroll", ({ scroll }) => {
// Apply transforms based on the scroll value
});