2.7 · Animation

Smooth scroll
(Lenis).

Physics-based momentum scrolling. The whole page is the demo — try scrolling with a mouse wheel and feel the difference.

Jump (uses Lenis's smooth animated scroll-to):

What it is

By default, browsers scroll in a very mechanical, instant way — you flick the wheel and the page jumps. Smooth scroll replaces this with a physics-based momentum system: when you scroll, the page decelerates smoothly instead of stopping abruptly, like a heavy object slowly coming to rest. Lenis is the most popular modern JavaScript library for this. When you visit a website and think "this scroll feels incredible, so buttery" — that's almost always Lenis.

How it works

Lenis overrides the browser's native scroll. It intercepts scroll input (mouse wheel, touch, trackpad), applies its own easing and momentum, and then moves the page via CSS transform instead of actual scrolling. This is smoother because CSS transforms are GPU-accelerated. Lenis is initialized with a few lines of JS and runs on every animation frame using requestAnimationFrame.

LenisThe most popular smooth scroll JS library — free and widely used
requestAnimationFrameBrowser API that fires a callback 60 times per second
EasingThe math curve controlling deceleration — cubic-bezier controls the 'feel'
lerpLinear interpolation — how Lenis blends current toward target position
Tip. Smooth scroll is a FEEL upgrade, not a visual one. Users might not notice it consciously, but the site feels premium and polished. Never apply smooth scroll to pages with fixed-height modals or overflow:hidden sections — it can cause visual glitches.

Scroll without effort.

Roll your wheel, swipe your trackpad, or press the jump links above. Notice the deceleration curve.

A · weight

Pages with mass.

Smooth scroll lends a sense of inertia. Content seems to weigh something — when you stop pushing it, it eases to rest. It's a tiny lie of physics, and it makes a site feel premium.

B · friction

Less jarring,
more composed.

Hard stops on traditional scroll feel jittery on long pages. Lenis's lerp interpolation rounds those edges off, especially when paired with scroll-snap or sticky sections.

C · compatibility

Plays well with GSAP.

Lenis exposes its scroll position so any GSAP ScrollTrigger animation continues to work as expected. Hand off the value and ScrollTrigger updates frame-perfectly with the smoothed scroll.

That's it — the
end of the page.

Try toggling Lenis off in the hero. Then scroll again. The change is small. The feeling is not.

Copy this prompt

Prompt · 2.7 Smooth scroll (Lenis)
Add Lenis smooth scrolling to this website. Import Lenis from CDN: <script src='https://unpkg.com/lenis@1.1.13/dist/lenis.min.js'></script>. Initialize with: const lenis = new Lenis({ duration: 1.2, easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), smooth: true }). Run in animation loop: function raf(time) { lenis.raf(time); requestAnimationFrame(raf); } requestAnimationFrame(raf). If GSAP ScrollTrigger is used on this page, also add: lenis.on('scroll', ScrollTrigger.update) and gsap.ticker.add((time) => { lenis.raf(time * 1000) }).

Example sites to study

Lenis active