Smooth Scrolling using Lenis and Native Scroll Animations in Webflow

This article was also published on Waveshape Collective’s Medium

Lenis, as compared to Locomotive scroll, is a newer smooth scrolling library alternative that works in a slightly different way than others I’ve come across.

As I wrote in my earlier guide Smooth Scrolling and Scroll Interactions in Webflow using Locomotive Scroll and Gsap ScrollTrigger, most libraries seem to hijack the user’s native scroll in various ways.

The downside of this is that tools such as Webflow don’t receive the correct scroll position. A correct scroll position is required in order to correctly display scroll animations. Hence the oftentimes buggy results.

However, Lenis doesn’t seem to hijack the user’s native scroll at all, but instead (in some genius way that I haven’t been able to identify how) seems to put an easing or smoothing on the native scroll while still delivering the correct scroll position to whatever software or code that needs it.

How do they do this? I’m not sure. But it’s so cool to see.

But more importantly, what does this mean? Well, we’re able to use Lenis together with Webflow’s native interactions 2.0, seemingly without issues.

Setup Lenis in Webflow Another huge plus is that the Lenis setup is super simple.

Simply copy the CDN link from the official Github repository, and copy & paste the default setup code.

It should look something like this.

Setup Lenis in Webflow

Another huge plus is that the Lenis setup is super simple.

Simply copy the CDN link from the official Github repository, and copy & paste the default setup code.

It should look something like this.

Now we’re done. Yeah, that’s it. After publishing your site, you should see the smooth scroll in action

Now you’re able to add whatever cool scrolling animations natively in Webflow, and they should work as intended. The only parameter that may cause some issues is the “smoothing” setting for your animation in Webflow.

However, your animation will receive the same kind of smoothing that Lenis applies on your scroll.

Example

Similar to the last guide, I’ve set up a simple Webflow example. This example consists of three sections, all having their own native scroll animation.

I haven’t really had the time to play around with various settings etc. but make sure to read the Lenis documentation if you’re interested.

Check out the live example by clicking here.

This is all code needed for this example:

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

<script>

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

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

requestAnimationFrame(raf)

</script>