Smooth Scroll with Lenis

Lenis is a very light (~2Kb gzipped) and easy to use Smooth Scrolling Javascript library.

Check this page to see Lenis in action : Smooth Scroll in Breakdance

How to install Lenis

Add a Code Block element and paste this code in the PHP Code area:

<script src="https://cdn.jsdelivr.net/gh/studio-freight/lenis@latest/bundled/lenis.js"></script>

In the same Code Block, paste the following code in the Javascript Code area:

const lenis = new Lenis({
duration: 1.2,
easing: (t) => (t === 1 ? 1 : 1 - Math.pow(2, -10 * t)),
direction: "vertical",
gestureDirection: "vertical",
smooth: true,
smoothTouch: false,
touchMultiplier: 2,
});

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

requestAnimationFrame(raf);

And finally add this little CSS fix in the CSS Code area:

html {
scroll-behavior: initial;
}

So now, our Code Block should look like this, which is enough to make it work on our page(s).

lenis-codeblock

How about anchor links?

If you still want to have a smooth scroll when you click on an anchor link (a link that targets an element in the same page), we need to use the Lenis.scrollTo method.

For example, if we want to scroll to the top of the current page, we can use the onclick attribute:

<a href="#top" onclick="lenis.scrollTo('#top')">scroll to anchor</a>

With Breakdance, it's just about adding a new attribute to your link element (button, text link, wrapper link...).

Example with a Button element : Go to the Advanced tab and add a new attribute with onclick for the name, and lenis.scrollTo('#top') for the value:

lenis-onclick-attribute

For more controls, we can also change the duration, or add an offset:

lenis.scrollTo('#top',{offset:50,duration:3})

lenis-onclick-scrollto

More info

Check the official page for more information : https://github.com/studio-freight/lenis