Smooth Scroll

© 2022 Studio Freight

scroll

to explore

A new smooth scroll library

fresh out of the

Studio Freight Darkroom

Check it out on github

Why smooth scroll?

Rethinking smooth scroll

We have to give props to libraries like Locomotive Scroll and GSAP ScrollSmoother. They’re well built and well documented – and we’ve used them a lot. But they still have issues that keep them from being bulletproof.

01

Loss of performance budget due to using CSS transforms

02

Inaccessibility from no page search support and native scrollbar

03

Non-negligible import costs (12.1kb - 24.34kb gzipped)

04

Limited animation systems for complex, scroll-based animations

05

Erasing native APIs like Intersection-Observer, CSS Sticky, etc.

01

Loss of performance budget due to using CSS transforms

02

Inaccessibility from no page search support and native scrollbar

03

Non-negligible import costs (12.1kb - 24.34kb gzipped)

04

Limited animation systems for complex, scroll-based animations

05

Erasing native APIs like Intersection-Observer, CSS Sticky, etc.

so we built
web scrolling

Enter
Lenis

As it should be

Lenis is an open-source library built to standardize scroll experiences and sauce up websites with butter-smooth navigation, all while using the platform and keeping it accessible.

01

Run scroll in the main thread

02

Lightweight
(under 3kb)

03

Made for 2022+

04

Bring your own animation library

05

CONTROL THE SCROLL EASING DURATION

06

Use any element as scroller

07

Enjoy horizontal + vertical support

08

Feel free to use “position: sticky” again

09

touch support