explaingit

darkroomengineering/lenis

13,866TypeScriptAudience · developerComplexity · 2/5Setup · easy

TLDR

A lightweight JavaScript library that adds smooth, inertia-based scrolling to any website, with easy integrations for React, Vue, Framer, and GSAP so scroll-driven animations stay perfectly in sync.

Mindmap

mindmap
  root((repo))
    What it does
      Smooth scrolling
      Inertia effect
      Scroll events
    Integrations
      React package
      Vue package
      GSAP compatible
      Framer support
    Features
      Snap scrolling
      Nested scroll areas
      Anchor link handling
    Tech Stack
      TypeScript
      JavaScript
      npm
    Setup
      CDN script tag
      npm install
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Add buttery smooth inertia scrolling to a portfolio or creative website with two lines of JavaScript and no build tool required.

USE CASE 2

Sync GSAP scroll-triggered animations, parallax sections, element reveals, with Lenis's custom scroll position so they stay in perfect sync.

USE CASE 3

Build a React portfolio with smooth scrolling by installing the Lenis npm package and wrapping the layout component.

USE CASE 4

Create a scroll-snapping one-page site with full-height sections using Lenis's snap add-on package.

Tech stack

TypeScriptJavaScriptnpmReactVueGSAPFramer

Getting it running

Difficulty · easy Time to first run · 5min

In plain English

Lenis is a small JavaScript library that makes scrolling on websites feel smoother. When you scroll a normal webpage, the movement is instant and can feel mechanical. Lenis intercepts that scrolling and adds a gentle inertia, so the page glides to a stop rather than cutting off abruptly. The name comes from the Latin word for smooth. The library is designed to be lightweight and to perform well on modern browsers. It works well alongside other animation tools. The README shows an example of connecting it with GSAP, a popular animation library, so that scroll-driven effects like parallax sections or element reveals stay in sync with Lenis's custom scroll position. It is also commonly used on creative or portfolio-style websites that include WebGL effects. Getting started is straightforward. For a basic setup you can drop two lines into any HTML page without needing a build tool at all: one line loads the stylesheet and another loads the script, then a single line of JavaScript turns smooth scrolling on. For more complex projects, Lenis is available as a package through npm and has dedicated integrations for React, Vue, and Framer. There is also a snap package that adds scroll snapping behavior. The settings let you tune the feel of the scroll, control how nested scrollable areas behave, handle anchor link clicks, and configure automatic resizing. Events are emitted on each scroll frame, which makes it straightforward to synchronize other animations or track scroll progress. The project is sponsored by several studios and individuals and is part of Vercel's open-source program. It is maintained by the design and development studio darkroom.engineering. The full README is longer than what was shown.

Copy-paste prompts

Prompt 1
Set up Lenis smooth scrolling in a plain HTML page using a CDN script tag, then connect it to GSAP ScrollTrigger so a parallax section animates correctly as the user scrolls.
Prompt 2
Show me how to install Lenis in a React project, wrap my App component so all pages have smooth inertia scrolling, and pause Lenis when a modal is open.
Prompt 3
I'm building a Vue 3 portfolio. Write the code to integrate Lenis smooth scroll using its Vue plugin and fire a custom animation when scroll progress reaches 50% of the page height.
Prompt 4
Using Lenis, implement scroll-snap behavior between three full-height sections on a one-page site, with a smooth glide between each snap point.
Open on GitHub → Explain another repo

← darkroomengineering on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.