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

[joo 3 Likes (Newbie)]

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

[GreenSock 18,228 Likes (Superhero)]

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

[joo 3 Likes (Newbie)]

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

[plusex 2 Likes (Newbie)]

[deleted]

[GSAP Helper 89 Likes (Contributor)]

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. 

[plusex 2 Likes (Newbie)]

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 ?

[plusex 2 Likes (Newbie)]

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)
 

 

[GreenSock 18,228 Likes (Superhero)]

@plusex Here's a fork with the new beta file in place which seems to work fine (right?): 

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