Lenis
A small JavaScript library that makes page scrolling smooth on websites.
- Stars
- 17k
- Forks
- 769
- Licence
- MIT
- Language
- TypeScript
- Last update
- 8 days ago
- Type
- Library
What it is
Lenis is a lightweight JavaScript library that replaces the browser's default scrolling with a smoother, eased motion. It wraps the browser's own scroll, so features like sticky elements and anchor links keep working. People use it to add polished scroll effects such as WebGL scroll syncing and parallax to websites.
- Add smooth vertical scrolling to a landing page with one initialization call
- Sync a WebGL scene or GSAP animation to the scroll position using the scroll event
- Enable smooth anchor-link navigation within a single-page layout
- Use the snap plugin to align sections while keeping smooth scrolling
Great for
- Web developers adding smooth scrolling to a marketing or portfolio site
- Developers syncing animations like GSAP ScrollTrigger or WebGL scenes to scroll position
- Teams using React, Vue, or Framer who want a ready-made adapter
- Sites that need smooth anchor links and nested scroll areas
Not ideal for
- Simple static pages where native scrolling is already sufficient, since the library adds motion and code to maintain
- Projects that cannot load a JavaScript library, because it depends on JavaScript to run
- Non-developers who want a no-code tool; the no-code option still requires editing HTML
How to get it
- 1
Install with a package manager
Install with npm
npm i lenisInstall with yarn
yarn add lenisInstall with pnpm
pnpm add lenis - 2
Run it
- Install the package with npm, yarn, or pnpm
- Import Lenis with import Lenis from 'lenis'
- Create an instance with new Lenis({ autoRaf: true })
- Optionally listen for scroll events with lenis.on('scroll', callback)
- 3
Get the most out of it
- Use the GSAP ScrollTrigger setup from the README to keep animations in sync with smooth scroll
- Enable anchors, autoToggle, and stopInertiaOnNavigate options for smoother navigation behavior
- Import the recommended lenis.css stylesheet as described in the Setup section
- Review the Settings table for options like allowNestedScroll and autoResize to fit your layout
Downloads
Strengths
- Lightweight with zero runtime dependencies, according to the README
- Works with the browser's native scroll, keeping sticky positioning and accessibility intact
- Offers framework packages for React, Vue, and Framer plus a snap plugin
Trade-offs
- Scrolling behavior changes from the browser default, so it needs testing with your own content and users
- Nested scroll handling via allowNestedScroll can hurt performance, as the README notes, and the prevent option is the alternative
- Requires some setup for animation loops (autoRaf or a custom requestAnimationFrame loop) that beginners may find confusing
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| lenis (this) | 17k | Library | beginner | 8 days ago | Web developers adding smooth scrolling to a marketing or portfolio site |
| interact.js | 12.9k | Library | intermediate | 3 months ago | Web developers building drag-and-drop interfaces |
| element | 54k | Library | beginner | 2.2 years ago | Developers maintaining an existing Vue 2.x web application |
| headlessui | 28.8k | Library | intermediate | 7 months ago | React or Vue developers building custom-designed interfaces |
| element-plus | 27.8k | Library | intermediate | 4 days ago | Developers building admin panels or business web apps with Vue 3 |
| vant | 24.4k | Library | beginner | 4 days ago | Teams building mobile-first web apps or H5 pages in Vue |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.