Cannot get ScrollSmoother to work with ScrollTrigger snapping

[trych 11 Likes (Newbie)]

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

[OSUblake 18,475 Likes (Superhero)]

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.

 

[trych 11 Likes (Newbie)]

@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?

[OSUblake 18,475 Likes (Superhero)]

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.

 

https://stackoverflow.com/a/37953806/2760155

 

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

 

[trych 11 Likes (Newbie)]

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

<!--- ALL YOUR CONTENT HERE --->

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

[GreenSock 18,260 Likes (Superhero)]

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

[GreenSock 18,260 Likes (Superhero)]

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

• ScrollTrigger: https://assets.codepen.io/16327/ScrollTrigger.min.js?v=3.10.3b 
• ScrollSmoother: https://assets.codepen.io/16327/ScrollSmoother.min.js?v=3.10.3b (only on CodePen/CodeSandbox/local)

Better?

 

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

[trych 11 Likes (Newbie)]

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!