Lenis

A lightweight smooth-scroll library by Studio Freight (now darkroom.engineering). It intercepts the wheel and animates scroll position with eased interpolation, giving pages that buttery, momentum feel.

Demo 01

Smooth scrolling, scoped to a panel

A real Lenis instance is attached to the box below (not the whole page, so the rest stays normal). Scroll with your wheel or trackpad — the motion is interpolated and eased by Lenis, and the live readout shows its values.

Section 1 — feel the easing

Wheel through this. Lenis is not the browser's native scroll: it animates toward the target offset every frame using a smoothing factor.

Section 2 — momentum

Flick the trackpad and the scroll glides to a stop instead of snapping. That ramp-down is Lenis interpolating.

Section 3 — programmatic

Use the anchor buttons above; they call lenis.scrollTo() which animates here smoothly.

Section 4 — RAF driven

Lenis updates inside a requestAnimationFrame loop, so it stays in sync with the browser's paint.

scroll: 0px · velocity: 0 · progress: 0%

import Lenis from 'lenis';
const lenis = new Lenis({ wrapper: el, content: inner, lerp: 0.08 });
function raf(t){ lenis.raf(t); requestAnimationFrame(raf); }
requestAnimationFrame(raf);

Demo 02

scrollTo() — animated anchors

Click a target and Lenis animates the panel above to it with a custom duration and easing — the same call powers smooth in-page anchor links.

Demo 03

Native vs Lenis

Same content, side by side. The left box uses the browser's default scroll; the right box has Lenis attached. Scroll both and feel the difference.

Native scroll

Lenis smooth scroll

Built with the real Lenis smooth-scroll library, loaded from cdn.jsdelivr.net/npm/lenis. Two genuine Lenis instances run on this page — one on the main demo panel and one on the comparison box — each driven by their own requestAnimationFrame loop. The page chrome comes from the shared CSS shell.

↑ All 64 tools