lenis: Lenis.scrollTo() - Duration / easing not working properly?

First of all, thanks for the best smooth scrolling library out there! Being able to use position: sticky again is liberating.

I’m trying to setup some anchor links smooth scrolling using Lenis.scrollTo() function, but I’m not sure if I understand how duration and easing works. Here’s my current code:

  const scrollButtons = document.querySelectorAll('.button-scroll');
  scrollButtons.forEach(button => {
    button.addEventListener('click', e => {
    	e.preventDefault();
    	var target = button.dataset.target;
      lenis.scrollTo(target, {
      	offset: 0, 
        immediate: false, 
        duration: 3,
        easing: (x) => (x < 0.5 ? 8 * x * x * x * x : 1 - pow(-2 * x + 2, 4) / 2)
      });
    });

The expectation here is to have the anchor link triggering a scroll with 3 seconds of duration, using a easeInOutQuart function for easing. However, the scroll happens extremely fast and the easing function is not applied.

Am I doing something wrong? Can you guys add more details about these properties on the documentation?

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 15 (5 by maintainers)

Most upvoted comments

@BleXor THANK YOU! Yes, targetEl.scrollTop works perfectly. Glad to know this is not only happening to me. Just replaced my code with your suggestion on my personal portfolio and now everything looks great.

@clementroche you can still see the issue on the second website I included on my last comment above for a sample of the issue if you need to investigate this further.

diegoliv on Sep 15, 2022

Had/have the same issue (v ^0.2.1) with scrollTo() with element/selector as parameter - it scrolls to top of page … “Fixed” it by using element.offsetTop as the parameter instead. See:

const targetEl = document.getElementById(targetId);
targetEl && this.lenis.scrollTo(targetEl.offsetTop, { ... });

BleXor on Sep 15, 2022

Hi thank for your feedback ! Your easing function seems wrong, can you try with easing: (x) => (x < 0.5 ? 8 * x * x * x * x : 1 - Math.pow(-2 * x + 2, 4) / 2)

clementroche on Sep 12, 2022