Jump to content
Search Community

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

joo test
Moderator Tag

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

  • 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

  • 6 months later...

Hi there,

Is this still not fixed?

I'm using ScrollSmoother 3.12.2 but the speed still messes up the return value for scrollSmoother.offset().

When i set the speed to 0.5 the returned offset is double what it's supposed to be (so i have to multiply it with the speed)

Or am i missing something?

 

Thanks!

Link to comment
Share on other sites

Sure:

See the Pen yLQWGWB by oscarorton (@oscarorton) on CodePen

 

As you can see return _offset has to be multiplied by the scrollSmoothers speed for it to be accurate, and only for certain versions.

I was wondering if this is expected behavior or a bug; it seems a bit weird that the scrollSmoother.offset() function doesn't return the actual offset of an element.

 

Thanks!

 

 

Link to comment
Share on other sites

Ah, that's a bit of a tricky logic thing actually. Let me explain...

 

When you set a speed, it alters the height of the body accordingly, so if speed is 0.5 it would stretch the height to be 2x what it normally would be (hence you must scroll twice as much...half speed). So let's say the target is 500px from the top...normally the offset would be 500px of course but if the speed is 0.5, that means the offset would be 1000px for the actual window (native scrolling) but the scrollTop of the ScrollSmoother would still be 500px. So it's native scroll vs. ScrollSmoother's scrollTop offset. See what I mean? Both are technically accurate in different ways/contexts. 

 

So if someone wants to find the offset relative to the native body scroll, it's returning the correct value currently. But when you plug that into the ScrollSmoother's scrollTop(), that's double due to the speed compensation (assuming speed is 0.5). 

 

What I think the best solution here is to add a boolean [3rd] parameter to the offset() method that allows you to specify which one you want - speed-compensated or native scroll position. And by default, we'll make it speed-compensated which would give you the behavior you're asking for here. 

 

I just updated the beta file (you may need to clear your cache): 

https://assets.codepen.io/16327/ScrollSmoother.min.js

 

Better? 

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.
×
×
  • Create New...