Jump to content


Cannot get ScrollSmoother to work with ScrollTrigger snapping

Go to solution Solved by GreenSock,

Recommended Posts

Hi there!

I am really excited about the latest gsap updates and all the great functionality it comes with! So first of all: Thanks for the fantastic work on this!
I tried to give the ScrollSmoother plugin a go in a project I am working on right now. The project has scrolltrigger snapping to snap to sections. When I now activate ScrollSmoother additionally, the snapping does not work correctly anymore. If I stop my scrolling between sections it starts jerking back and forth, and just occasionally snaps to the section eventually.

I wonder, do I need to set this up differently, or is this something where ScrollTrigger and ScrollSmoother do not work together (yet)?

For an example, see the included CodePen.


Thanks a lot!

Edit: I notice, the effect does not seem to be quite so bad on the little embedded CodePen iFrame. Maybe it gets worse the further the snap position is from its target position? To better observe the effect, maximize the window size on the CodePen sketch. Sometimes it keeps jerking back and forth endlessly.

See the Pen BaJwdJW by trych (@trych) on CodePen

Link to comment
Share on other sites

Hi Trych,


ScrollSmoother and ScrollTrigger work together, but you might have stumbled upon a bug. It doesn't seem happen if you remove those durations. Please standby while we look into this.


Link to comment
Share on other sites

@OSUblake Thanks for looking into this. I am still observing this, even when I remove the duration property from the snap object, although it seems to happen less frequently (and just once each time it happens, not endlessly in succession). As I said, it seems to be much easier to observe when you use it on a full size window.

On another note: I noticed that fixed position elements that are included into the wrapping containers are not behaving like fixed position elements anymore once the plugin kicks in, i.e. they move out of the viewport once I start scrolling. Is this intended and am I supposed to move those elements outside the wrapping container (docs say to include ALL content within the wrappers)? Or might this be another bug?

Link to comment
Share on other sites

fixed position won't work inside the content container because it being transformed, which breaks fixed positioning. It's a CSS thing, so there's not much you can do about that.




You can use ScrollTrigger to do the pinning, or put your fixed content outside of the content container.


Link to comment
Share on other sites

Ok, understood, thank you.

It would probably be a good idea to be a bit more explicit in the ScrollSmoother docs then, because it says


and with all the magic that ScrollSmoother is doing, I was not sure, if it maybe also takes care of fixed positioned elements.

Link to comment
Share on other sites

Thanks for the suggestion, @trych. I added some notes to the docs accordingly. 

  • Like 1
Link to comment
Share on other sites

  • Solution

There was indeed a bug/regression related to snapping and it should be fixed in the next release which you can preview at: 



Sorry about the confusion there. Thanks for pointing out the issue. 

  • Like 1
Link to comment
Share on other sites

I don't seem to be able to test this in my local setup (as the trial warning kicks in), but using it in the Codepen it seems to have fixed it!
Thanks a lot for looking into this, I am really impressed by the speed and helpfulness of the Greensock team!

  • Like 2
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.