Foundation Lenis Smooth Scroll — Motion Lab

Foundations / Lenis Smooth Scroll

Smooth scroll foundation

Lenis provides buttery-smooth scroll inertia. Pair with GSAP ScrollTrigger for scroll-tied animations. This is an invisible utility — scroll this page to feel it.

Status

Tip: Lenis works at the document level. On this demo page, smooth scroll is active if motion is not reduced. Scroll velocity and direction data are exposed for use with GSAP ScrollTrigger.

1. Mechanisme — kopieer 1-op-1, geen styling-keuzes

// Mechanisme: foundation-lenis-smooth-scroll
// Kopieer 1-op-1, geen stijlkeuzes.
import Lenis from 'https://esm.sh/@studio-freight/lenis@1.1.14';
import gsap from 'https://esm.sh/gsap@3.12.5';
import { ScrollTrigger } from 'https://esm.sh/gsap@3.12.5/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);
if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
  const lenis = new Lenis();
  lenis.on('scroll', ScrollTrigger.update);
  gsap.ticker.add(time => lenis.raf(time * 1000));
  gsap.ticker.lagSmoothing(0);
}

2. Skeleton — DOM + class-namen, mag herschikken

<!-- Skeleton: foundation-lenis-smooth-scroll -->
<!-- Add to <head> or main layout: -->
<!-- Script with Lenis + GSAP integration -->
<main>
  <section style="min-height:100vh;">Section 1</section>
  <section style="min-height:100vh;">Section 2</section>
  <section style="min-height:100vh;">Section 3</section>
</main>

3. Styling-template — verplicht eigen invulling per merk

/* Styling: foundation-lenis-smooth-scroll */
/* No visual changes required — this is an invisible scroll utility */
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }