Lenis + Webflow (with anchor links workaround)

webflow.html

<script src="https://cdn.jsdelivr.net/gh/studio-freight/[email protected]/bundled/lenis.js"></script>

<script>
if (!document.querySelector("html").classList.contains('w-editor')){
  const lenis = new Lenis({
    duration: 1.2,
    easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), // https://www.desmos.com/calculator/brs54l4xou
    direction: 'vertical', // vertical, horizontal
    gestureDirection: 'vertical', // vertical, horizontal, both
    smooth: true,
    smoothTouch: false,
    touchMultiplier: 2,
    infinite: false,
  })

  // Get scroll value. This is just for testing purposes. Delete this if you're not using the scroll value for anything.
  lenis.on('scroll', ({ scroll, limit, velocity, direction, progress }) => {
    console.log({ scroll, limit, velocity, direction, progress })
  })

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

  // Grab all elements that have a "data-target" attribute
  const scrollButtons = document.querySelectorAll('[data-target]');

  // For each element, listen to a "click" event
  scrollButtons.forEach(button => {
    button.addEventListener('click', e => {
      e.preventDefault();

      // get the DOM element by the ID (data-target value)
      var target = button.dataset.target,
          $el = document.getElementById(target.replace('#', ''));

      // Use lenis.scrollTo() to scroll the page to the right element
      lenis.scrollTo($el, {
        offset: 0, 
        immediate: false,
        duration: 3,
        easing: (x) => (x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2), // https://easings.net
      });
    });
  });

  requestAnimationFrame(raf)
}
</script>

Hi
I used your code on two sites, it worked on all browsers except Safari.
I deleted the first line and it worked on safari.
code mentioned here

I'm not a code expert, do you think deleting the first line could cause problems?

Hi I used your code on two sites, it worked on all browsers except Safari. I deleted the first line and it worked on safari. code mentioned here

I'm not a code expert, do you think deleting the first line could cause problems?

Hi, @H-amad,

The first line of the code is specifically targetting Webflow when the Editor view is being used. It's there to disable Lenis on that view so people managing the site can do their jobs without any issues (it seems like the website doesn't work properly with the Editor view + Lenis).

There might be an issue with how that line of code is interpreted by Safari specifically. But removing the line won't cause any issues.

I'll review the code once I have time to make sure it also works on Safari.

Hi,

I used your code and I love it! Worked perfectly, I'm not a coding expert and my concern is, how to automatically hide the native scrollbar on the right side after scrolling? I want to hide it like the default on Webflow. Please help me with the code. Highly appreciate!