Lenis 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 synching, parallax effects and much more, see Demo and Showcase. Read our Manifesto to learn more about the inspiration behind Lenis.

If you like Lenis, please consider sponsoring us. Your support helps us maintain the project and continue to improve it.

• lenis
• lenis/react
• lenis/snap

using a package manager:

npm i lenis

import Lenis from 'lenis'

using scripts:

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

// Initialize Lenis
const lenis = new Lenis({
  autoRaf: true,
});

// Listen for the scroll event and log the event data
lenis.on('scroll', (e) => {
  console.log(e);
});

// Initialize Lenis
const lenis = new Lenis();

// Use requestAnimationFrame to continuously update the scroll
function raf(time) {
  lenis.raf(time);
  requestAnimationFrame(raf);
}

requestAnimationFrame(raf);

import stylesheet

import 'lenis/dist/lenis.css'

or link the CSS file:

<link rel="stylesheet" href="https://unpkg.com/lenis@1.1.17/dist/lenis.css">

or add it manually:

See lenis.css stylesheet

// Initialize a new Lenis instance for smooth scrolling
const lenis = new Lenis();

// Synchronize Lenis scrolling with GSAP's ScrollTrigger plugin
lenis.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 tick
gsap.ticker.add((time) => {
  lenis.raf(time * 1000); // Convert time from seconds to milliseconds
});

// Disable lag smoothing in GSAP to prevent any delay in scroll animations
gsap.ticker.lagSmoothing(0);

See documentation for lenis/react.

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

const lenis = new Lenis({
  prevent: (node) => node.id === 'modal',
})

See example

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

See example

prevent wheel events only

<div data-lenis-prevent-wheel>scrollable content</div>

prevent touch events only

<div data-lenis-prevent-touch>scrollable content</div>

<a href="#anchor" onclick="lenis.scrollTo('#anchor')">scroll to anchor</a>

• 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

• Scroll Animation Ideas for Image Grids by Codrops
• How to Animate SVG Shapes on Scroll by Codrops
• The BEST smooth scrolling library for your Webflow website! (Lenis) by Diego Toda de Oliveira
• Easy smooth scroll in @Webflow with Lenis + GSAP ScrollTrigger tutorial by También Studio

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

• DeSo by Studio Freight
• Sculpting Harmony by Resn
• Superpower
• Daylight Computer by Basement Studio
• Lifeworld by Olafur Eliasson by Nicolas Garnier, Simon Riisnæs Dagfinrud, Lumír Španihel, Everton Guilherme, Diana Alcausin, Cristiana Sousa

This set of hooks is curated and maintained by the darkroom.engineering team:

• Clément Roche (@clementroche_) – darkroom.engineering
• Guido Fier (@uido15) – darkroom.engineering
• Leandro Soengas (@lsoengas) - darkroom.engineering
• Fermin Fernandez (@Fermin_FerBridd) - darkroom.engineering
• Felix Mayr (@feledori) - darkroom.engineering
• Franco Arza (@arzafran) - darkroom.engineering

The MIT License.