Lenis ("smooth" in latin) is a lightweight, robust, and performant smooth scroll library. It's designed by @darkroom.engineering to be simple to use and easy to integrate into your projects. It's built with performance in mind and is optimized for modern browsers. It's perfect for creating smooth scrolling experiences on your website such as WebGL scroll syncing, parallax effects, and much more, see Demo and Showcase.

Read our Manifesto to learn more about the inspiration behind Lenis.

• Features
• Sponsors
• Packages
• Showcase
• Installation
• Setup
• No-code usage
• Settings
• Properties
• Methods
• Events
• Considerations
• Limitations
• Troubleshooting
• Tutorials
• Plugins
• License

• Lightweight & dependency-free — the whole library is a few KB with zero runtime dependencies
• Runs on native scroll — wraps the browser's own scroll, so position: sticky, anchor links, and accessibility keep working
• Any axis — smooth vertical, horizontal, and nested scrolling from a single instance
• Built for sync — drives WebGL scroll scenes, GSAP ScrollTrigger, and parallax off one loop
• Framework adapters — first-class packages for React, Vue, and Framer
• Scroll snapping — the snap plugin aligns sections without fighting the smooth scroll

If you’ve used Lenis and it made your site feel just a little more alive, consider sponsoring.

Your support helps us smooth out the internet one library at a time—and lets us keep building tools that care about the details most folks overlook.

• lenis
• lenis/react
• lenis/vue
• lenis/framer
• lenis/snap

Using a package manager:

npm i lenis
# or
yarn add lenis
# or
pnpm add lenis

importLenisfrom'lenis'

Using scripts:

<scriptsrc="https://unpkg.com/lenis@1.3.25/dist/lenis.min.js"></script>

// Initialize Lenisconstlenis=newLenis({autoRaf: true,});// Listen for the scroll event and log the event datalenis.on('scroll',(e)=>{console.log(e);});

// Initialize Lenisconstlenis=newLenis();// Use requestAnimationFrame to continuously update the scrollfunctionraf(time){lenis.raf(time);requestAnimationFrame(raf);}requestAnimationFrame(raf);

Import stylesheet:

import'lenis/dist/lenis.css'

Or link the CSS file:

<linkrel="stylesheet" href="https://unpkg.com/lenis@1.3.25/dist/lenis.css">

Or add it manually:

See lenis.css stylesheet

// Initialize a new Lenis instance for smooth scrollingconstlenis=newLenis();// Synchronize Lenis scrolling with GSAP's ScrollTrigger pluginlenis.on('scroll',ScrollTrigger.update);// Add Lenis's requestAnimationFrame (raf) method to GSAP's ticker// This ensures Lenis's smooth scroll animation updates on each GSAP tickgsap.ticker.add((time)=>{lenis.raf(time*1000);// Convert time from seconds to milliseconds});// Disable lag smoothing in GSAP to prevent any delay in scroll animationsgsap.ticker.lagSmoothing(0);

One line, no build step — just drop this into your HTML:

<linkrel="stylesheet" href="https://unpkg.com/lenis@1.3.25/dist/lenis.css"><scriptsrc="https://unpkg.com/lenis@1.3.25/dist/lenis.min.js"></script><script>newLenis({autoRaf: true,autoToggle: true,anchors: true,allowNestedScroll: true,naiveDimensions: true,stopInertiaOnNavigate: true})</script>

That's it, your page now has smooth scrolling and should handle most of the usual issues such as:

• compatibility with other packages
• modals
• smooth anchors
• scroll reset on page change

The simplest and most reliable way to handle nested scrollable elements is to use the allowNestedScroll option:

constlenis=newLenis({allowNestedScroll: true,})

This automatically detects nested scrollable elements and lets them scroll natively. However, this can create performance issues since Lenis needs to check the DOM tree on every scroll event. If you experience performance problems, use data-lenis-prevent instead.

<divdata-lenis-prevent>scrollable content</div>

See example

<divid="modal">scrollable content</div>

constlenis=newLenis({prevent: (node)=>node.id==='modal',})

See example

By default, Lenis will prevent anchor links from working while scrolling. To enable them, you must set anchors: true.

newLenis({anchors: true})

You can also use scrollTo options:

newLenis({anchors: {offset: 100,onComplete: ()=>{console.log('scrolled to anchor')}}})

• no support for CSS scroll-snap, you must use (lenis/snap)
• capped to 60fps on Safari (source) and 30fps on low power mode
• smooth scroll will stop working over iframe since they don't forward wheel events
• position fixed seems to lag on MacOS Safari pre-M1 (source)
• touch events may behave unexpectedly when syncTouch is enabled on iOS < 16
• nested scroll containers require proper configuration to work correctly

• Make sure you use the latest version of Lenis
• Include the recommended CSS
• If using GSAP ScrollTrigger, ensure proper integration (see GSAP ScrollTrigger setup section)
• Test without Lenis to ensure your element/page is scrollable
• Be sure to use autoRaf: true or manually call lenis.raf(time) in your animation loop

• Infinite Scrolling with Lenis by Matt Rothenberg
• Building Smooth Scroll in 2025 with Lenis by Edoardo Lunardi

• r3f-scroll-rig by 14islands
• locomotive-scroll by Locomotive

MIT © darkroom.engineering