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:
In the same Code Block, paste the following code in the Javascript Code area:
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:
scroll-behavior: initial;
}
So now, our Code Block should look like this, which is enough to make it work on our page(s).
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:
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:
For more controls, we can also change the duration, or add an offset:
lenis.scrollTo('#top',{offset:50,duration:3})
More info
Check the official page for more information : https://github.com/studio-freight/lenis