Jump to content


Problems with the ScrollSmoother Plug-in speed option in GSAP 3.11.4

Go to solution Solved by GreenSock,

Recommended Posts

I was looking for a way to slow down scrolling using the ScrollSmoother plug-in and found that feature was added to the new release.
I applied the option and it worked as I thought, but I found a problem using the scrollTo method.
The speed option appears to miscalculate the target distance for the scrollTo method. To solve the problem, I calculated and applied the offset height of the element, but it was not successful.
Is there a solution? Thank you.

See the Pen yLqNmyv by joo0645654 (@joo0645654) on CodePen

Link to comment
Share on other sites

  • Solution

Ah thanks for pointing that out @joo. It should be fixed in the next release but in the meantime you can just do this: 

// assumes your ScrollSmoother instance is named "scroller" (but you can change it of course)

// old
scroller.scrollTo(this.getAttribute('href'), true, 'top -1px');

// new
let version = ScrollSmoother.version.split("."),
    speed = (+version[1] === 11 && +version[2] === 4 && scroller.vars.speed) || 1,
    position = scroller.offset(this.getAttribute('href'), 'top -1px') / speed;
scroller.scrollTo(position, true);

That code will automatically adjust for future releases so that it won't break. It only applies the fix when ScrollSmoother 3.11.4. 


Basically you just get the offset and divide it by the speed. Does that work for you?

See the Pen eYjpzRR?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 1
Link to comment
Share on other sites

The solution worked like magic! Thank you very much. That's a quick and perfect answer.

  • Like 3
Link to comment
Share on other sites

  • 1 month later...

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 


Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.


Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen


If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.


Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

Link to comment
Share on other sites

Apologies, the earlier question it was a mistake on my end. 


But i found another bug and will try to reproduce it in a pen. But when defining the speed ,

then `this.smoother.paused(true)` and then `this.smoother.paused(false)`

and start scrolling again, the page jumps to somewhere behind. console logging the progress of the smoothscroller shows that the `this.smoother.progress` doesnt match before and after pausing it.

is there a way of setting the progress manually ?

Link to comment
Share on other sites

Replicated the issue here with a fork of OP's pen.

See the Pen PoBxWrL by farisk (@farisk) on CodePen


As you can see, if a speed is set (other than value of 1), 
if you scroll -> pause (with the button in the top right) -> unpause -> scroll (the page jumps here)


Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.