I added Lenis snotth scroll to one of our client's Webflow project. Now I am unable to scroll to the very bottom of the page.

The website: /

Here's the code I use to init Lenis:

const lenis = new Lenis()

lenis.on('scroll', (e) => {
  console.log(e)
})

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

requestAnimationFrame(raf)

I already tried deactivating sections which load dynamic content from Webflow's CMS. Also, I temporarily removed the Swiper slider to see if the issue still persists.

As soon as I resize the window it works perfectly fine. It seems like there is some content which loads after the Lenis plugin is initialized but I can't figure it out.

Does anyone know what the issue could be?

I added Lenis snotth scroll to one of our client's Webflow project. Now I am unable to scroll to the very bottom of the page.

The website: https://mo-mo.webflow.io/

Here's the code I use to init Lenis:

const lenis = new Lenis()

lenis.on('scroll', (e) => {
  console.log(e)
})

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

requestAnimationFrame(raf)

I already tried deactivating sections which load dynamic content from Webflow's CMS. Also, I temporarily removed the Swiper slider to see if the issue still persists.

As soon as I resize the window it works perfectly fine. It seems like there is some content which loads after the Lenis plugin is initialized but I can't figure it out.

Does anyone know what the issue could be?

• javascript
• css
• swiper.js
• webflow

5 Answers 5

What causes this problem is that lenis scroll initializes before the document is fully loaded.

So what you need to do is to put this code in your Webflow global code (at the bottom):

//stop lenis 
lenis.stop();

//reload lenis animations
$(document).ready(function(){lenis.start();})

Ran into this just now with the React Lenis wrapper. Inside the wrapper, the main div which set the height of the page was positioned absolute. Setting it to relative did the trick for me.

This issue can also be caused by lenis miscalculating the height of the page, particularly when you have lazy loading assets like images. You can fix this by setting a width and height attribute to your images - making libraries that depend on page size eg Lenis and GSAP perform better.

In my case this was caused by images using lazy loading, thus only loading when in view.

This fixed it for me, add this to the bottom of the script.

let resizeTimeout;

function refreshLenis() {
  clearTimeout(resizeTimeout); // Cancel previous resize calls
  resizeTimeout = setTimeout(() => {
    requestAnimationFrame(() => {
      lenis.resize(); // Recalculate dimensions inside requestAnimationFrame for smoother transitions
    });
  }, 300); // Adjust delay as needed
}

// Refresh Lenis when the page fully loads
window.addEventListener("load", refreshLenis);

// Also refresh Lenis when lazy-loaded images finish loading
document.querySelectorAll("img[loading='lazy']").forEach((img) => {
  img.addEventListener("load", refreshLenis);
});

I had the same issue and after checking various sources, what worked for me was just importing the lenis stylesheet that they provide from import 'lenis/dist/lenis.css'
You can find more info on https://www.npmjs./package/lenis#setup