Scroll

Lenis

Buttery smooth scroll, used by award-winning sites.

Docs

Live demolenis

01Scroll inside — buttery-smooth with Lenis

02Scroll inside — buttery-smooth with Lenis

03Scroll inside — buttery-smooth with Lenis

04Scroll inside — buttery-smooth with Lenis

05Scroll inside — buttery-smooth with Lenis

06Scroll inside — buttery-smooth with Lenis

07Scroll inside — buttery-smooth with Lenis

08Scroll inside — buttery-smooth with Lenis

09Scroll inside — buttery-smooth with Lenis

10Scroll inside — buttery-smooth with Lenis

11Scroll inside — buttery-smooth with Lenis

12Scroll inside — buttery-smooth with Lenis

13Scroll inside — buttery-smooth with Lenis

14Scroll inside — buttery-smooth with Lenis

15Scroll inside — buttery-smooth with Lenis

16Scroll inside — buttery-smooth with Lenis

17Scroll inside — buttery-smooth with Lenis

18Scroll inside — buttery-smooth with Lenis

19Scroll inside — buttery-smooth with Lenis

20Scroll inside — buttery-smooth with Lenis

21Scroll inside — buttery-smooth with Lenis

22Scroll inside — buttery-smooth with Lenis

23Scroll inside — buttery-smooth with Lenis

24Scroll inside — buttery-smooth with Lenis

Lenis powers the smooth-scroll look on most award-winning creative sites. It plays nicely with native scroll APIs, works on a scoped element (like this demo) or on window.

Install

npm i lenis

Snippet

import Lenis from "lenis";

const lenis = new Lenis({
  wrapper: ref.current, // or window
  duration: 1.2,
  easing: (t) => 1 - Math.pow(1 - t, 3),
});

function raf(time: number) {
  lenis.raf(time);
  requestAnimationFrame(raf);
}
requestAnimationFrame(raf);