Repolode
Submit
darkroomengineering

darkroomengineering/lenis

A lightweight, dependency-free smooth scroll library for the web that wraps native scrolling with eased, animated motion.

View on GitHubWebsite
Stars
17,120
Forks
779
Open issues
33
Last commit
9 days ago

What is it?

Lenis is a smooth scroll library for web pages. It intercepts wheel and touch input and animates the scroll position toward its target, giving sites a smoother, more fluid feel. It works by wrapping the browser's own scroll rather than replacing it, so position: sticky, anchor links and accessibility behaviour continue to function.

It supports vertical, horizontal and nested scrolling from a single instance, and exposes events and a per-frame raf method so that WebGL scenes, GSAP ScrollTrigger and parallax effects can stay in sync with the scroll position. Official packages cover React, Vue and Framer, and a separate snap plugin handles section alignment. Configuration covers duration, easing or lerp, reduced-motion handling and per-element opt-outs via data attributes or a prevent callback.

Lenis can be installed through npm or loaded from a CDN script for no-build use. Known limitations include no support for CSS scroll-snap, smooth scrolling not passing through iframes, and a 60fps cap on Safari.

Key features

  • 01Zero runtime dependencies with a small bundle size
  • 02Smooth vertical, horizontal and nested scrolling from one instance
  • 03Keeps native scroll behaviour such as position: sticky and anchor links
  • 04Syncs with WebGL scenes, GSAP ScrollTrigger and parallax effects
  • 05Official React, Vue and Framer packages, plus a snap plugin

Use cases

  • Adding smooth scrolling to marketing or portfolio websites
  • Synchronizing a Three.js or WebGL scene with page scroll
  • Building scroll-driven animations with GSAP ScrollTrigger
  • Creating smooth scroll containers inside modals or nested panels

Quick start

  1. 1

    Install Lenis with npm

    npm i lenis
  2. 2

    Import Lenis in your code

    import Lenis from 'lenis'
  3. 3

    Create an instance with autoRaf enabled

Things to know

  • Requires you to wire Lenis into your own scroll and animation loop unless you use autoRaf or the no-code setup.

Topics

#smooth-scroll#javascript#typescript#animation#scroll#react#vue#webgl#darkroom-engineering#performance

FAQ

What is lenis?
A lightweight, dependency-free smooth scroll library for the web that wraps native scrolling with eased, animated motion. Lenis is a smooth scroll library for web pages. It intercepts wheel and touch input and animates the scroll position toward its target, giving sites a smoother, more fluid feel. It works by wrapping the browser's own scroll rather than replacing it, so position: sticky, anchor links and accessibility behaviour continue to function.
Is lenis free to use? What license does it have?
lenis is open source under the MIT license. Check the license terms before using it in commercial products.
Is lenis still maintained?
Actively maintained. The last commit to lenis was on Oct 29, 2026.
What can I use lenis for?
Adding smooth scrolling to marketing or portfolio websites Synchronizing a Three.js or WebGL scene with page scroll Building scroll-driven animations with GSAP ScrollTrigger Creating smooth scroll containers inside modals or nested panels
How do I install lenis?
Install Lenis with npm: npm i lenis Import Lenis in your code: import Lenis from 'lenis' Create an instance with autoRaf enabled
Where can I get lenis?
The source code and installation instructions are on GitHub: https://github.com/darkroomengineering/lenis

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects