javascriptcssswiper.jswebflow

Lenis Scroll: Unable to scroll to bottom of page

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?

Solution

  • 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();})