Gathering detailed insights and metrics for lenis
Gathering detailed insights and metrics for lenis
Gathering detailed insights and metrics for lenis
Gathering detailed insights and metrics for lenis
@studio-freight/lenis
Lenis is a smooth scroll library to normalize and smooth the scrolling experience across devices
@studio-freight/react-lenis
 
nuxt-lenis
This is a Nuxt wrapper for [Lenis](https://lenis.studiofreight.com/) (by [Studio Freight](https://studiofreight.com/)) – providing smooth scrolling with support for multiple instances in a type-safe and reactive way.
@studio-freight/lenis-test
[](https://github.com/darkroomengineering/lenis)
npm install lenis
Typescript
Module System
Node Version
NPM Version
82.8
Supply Chain
92.8
Quality
92.2
Maintenance
100
Vulnerability
98.9
License
TypeScript (82.1%)
Astro (8.16%)
Vue (4.45%)
CSS (2.88%)
JavaScript (1.33%)
HTML (1.08%)
Total Downloads
2,160,300
Last Day
3,414
Last Week
47,724
Last Month
208,667
Last Year
2,108,899
MIT License
11,229 Stars
970 Commits
455 Forks
50 Watchers
13 Branches
27 Contributors
Updated on Jul 06, 2025
Minified
Minified + Gzipped
Latest Version
1.3.4
Package Id
lenis@1.3.4
Unpacked Size
425.79 kB
Size
92.16 kB
File Count
26
NPM Version
10.8.2
Node Version
21.1.0
Published on
May 29, 2025
Cumulative downloads
Total Downloads
Last Day
-6.3%
3,414
Compared to previous day
Last Week
-14.3%
47,724
Compared to previous week
Last Month
-33.5%
208,667
Compared to previous month
Last Year
4,027.2%
2,108,899
Compared to previous year
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.
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.
Using a package manager:
1npm i lenis
1import Lenis from 'lenis'
Using scripts:
1<script src="https://unpkg.com/lenis@1.3.4/dist/lenis.min.js"></script>
1// Initialize Lenis 2const lenis = new Lenis({ 3 autoRaf: true, 4}); 5 6// Listen for the scroll event and log the event data 7lenis.on('scroll', (e) => { 8 console.log(e); 9});
1// Initialize Lenis
2const lenis = new Lenis();
3
4// Use requestAnimationFrame to continuously update the scroll
5function raf(time) {
6 lenis.raf(time);
7 requestAnimationFrame(raf);
8}
9
10requestAnimationFrame(raf);
import stylesheet
1import 'lenis/dist/lenis.css'
or link the CSS file:
1<link rel="stylesheet" href="https://unpkg.com/lenis@1.3.4/dist/lenis.css">
or add it manually:
1// Initialize a new Lenis instance for smooth scrolling 2const lenis = new Lenis(); 3 4// Synchronize Lenis scrolling with GSAP's ScrollTrigger plugin 5lenis.on('scroll', ScrollTrigger.update); 6 7// Add Lenis's requestAnimationFrame (raf) method to GSAP's ticker 8// This ensures Lenis's smooth scroll animation updates on each GSAP tick 9gsap.ticker.add((time) => { 10 lenis.raf(time * 1000); // Convert time from seconds to milliseconds 11}); 12 13// Disable lag smoothing in GSAP to prevent any delay in scroll animations 14gsap.ticker.lagSmoothing(0); 15
See documentation for lenis/react.
Option | Type | Default | Description |
---|---|---|---|
wrapper | HTMLElement, Window | window | The element that will be used as the scroll container. |
content | HTMLElement | document.documentElement | The element that contains the content that will be scrolled, usually wrapper 's direct child. |
eventsTarget | HTMLElement, Window | wrapper | The element that will listen to wheel and touch events. |
smoothWheel | boolean | true | Smooth the scroll initiated by wheel events. |
lerp | number | 0.1 | Linear interpolation (lerp) intensity (between 0 and 1). |
duration | number | 1.2 | The duration of scroll animation (in seconds). Useless if lerp defined. |
easing | function | (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)) | The easing function to use for the scroll animation, our default is custom but you can pick one from Easings.net. Useless if lerp defined. |
orientation | string | vertical | The orientation of the scrolling. Can be vertical or horizontal . |
gestureOrientation | string | vertical | The orientation of the gestures. Can be vertical , horizontal or both . |
syncTouch | boolean | false | Mimic touch device scroll while allowing scroll sync (can be unstable on iOS<16). |
syncTouchLerp | number | 0.075 | Lerp applied during syncTouch inertia. |
touchInertiaMultiplier | number | 35 | Manage the strength of syncTouch inertia. |
wheelMultiplier | number | 1 | The multiplier to use for mouse wheel events. |
touchMultiplier | number | 1 | The multiplier to use for touch events. |
infinite | boolean | false | Enable infinite scrolling! syncTouch: true is required on touch devices (See example). |
autoResize | boolean | true | Resize instance automatically based on ResizeObserver . If false you must resize manually using .resize() . |
prevent | function | undefined | Manually prevent scroll to be smoothed based on elements traversed by events. If true is returned, it will prevent the scroll to be smoothed. Example: (node) => node.classList.contains('cookie-modal') . |
virtualScroll | function | undefined | Manually modify the events before they get consumed. If false is returned, the scroll will not be smoothed. Examples: (e) => { e.deltaY /= 2 } (to slow down vertical scroll) or ({ event }) => !event.shiftKey (to prevent scroll to be smoothed if shift key is pressed). |
overscroll | boolean | true | Similar to CSS overscroll-behavior (https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior). |
autoRaf | boolean | false | Wether or not to automatically run requestAnimationFrame loop. |
anchors | boolean, ScrollToOptions | false | Scroll to anchor links when clicked. If true is passed, it will enable anchor links with default options. If ScrollToOptions is passed, it will enable anchor links with the given options. |
autoToggle | boolean | false | Automatically start or stop the lenis instance based on the wrapper's overflow property, ⚠️ this requires Lenis recommended CSS. Safari > 17.3, Chrome > 116 and Firefox > 128 (https://caniuse.com/?search=transition-behavior). |
allowNestedScroll | boolean | false | Allow nested scrolls. If true is passed, it will allow nested scrolls. If false is passed, it will not allow nested scrolls. ⚠️ To be used with caution since this can lead to performance issues, prefer using prevent or data-lenis-prevent instead. |
Property | Type | Description |
---|---|---|
animatedScroll | number | Current scroll value |
dimensions | object | Dimensions instance |
direction | number | 1 : scrolling up, -1 : scrolling down |
emitter | object | Emitter instance |
options | object | Instance options |
targetScroll | number | Target scroll value |
time | number | Time elapsed since instance creation |
actualScroll | number | Current scroll value registered by the browser |
lastVelocity | number | last scroll velocity |
velocity | number | Current scroll velocity |
isHorizontal (getter) | boolean | Whether or not the instance is horizontal |
isScrolling (getter) | boolean, string | Whether or not the scroll is being animated, smooth , native or false |
isStopped (getter) | boolean | Whether or not the user should be able to scroll |
limit (getter) | number | Maximum scroll value |
progress (getter) | number | Scroll progress from 0 to 1 |
rootElement (getter) | HTMLElement | Element on which Lenis is instanced |
scroll (getter) | number | Current scroll value (handles infinite scroll if activated) |
className (getter) | string | rootElement className |
Method | Description | Arguments |
---|---|---|
raf(time) | Must be called every frame for internal usage. | time : in ms |
scrollTo(target, options) | Scroll to target. | target : goal to reach
options
|
on(id, function) | id can be any of the following instance events to listen. | |
stop() | Pauses the scroll | |
start() | Resumes the scroll | |
resize() | Compute internal sizes, it has to be used if autoResize option is false . | |
destroy() | Destroys the instance and removes all events. |
Event | Callback Arguments |
---|---|
scroll | Lenis instance |
virtual-scroll | {deltaX, deltaY, event} |
1<div id="modal">scrollable content</div>
1const lenis = new Lenis({ 2 prevent: (node) => node.id === 'modal', 3})
1<div data-lenis-prevent>scrollable content</div>
prevent wheel events only
1<div data-lenis-prevent-wheel>scrollable content</div>
prevent touch events only
1<div data-lenis-prevent-touch>scrollable content</div>
By default, Lenis will prevent anchor links, click while scrolling, to fix that you must set anchors: true
.
1new Lenis({
2 anchors: true
3})
You can also use scrollTo
options.
1new Lenis({ 2 anchors: { 3 offset: 100, 4 onComplete: ()=>{ 5 console.log('scrolled to anchor') 6 } 7 } 8})
syncTouch
is enabled on iOS < 16autoRaf: true
or to manually call lenis.raf(time)
.MIT © darkroom.engineering
No vulnerabilities found.
No security vulnerabilities found.