Making ScrollTrigger Snapping play nice with ScrollerProxy

[JulieAutobots]

Hi again!

 

I've set up a ScrollTrigger section that pins and snaps each panel to the browser window, using this awesome demo for reference.

 

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

 

The website uses ASScroll as a ScrollerProxy, and I'm having some issues getting the two effects to co-exist. The pinning works great, but snapping to each section? Not so much.

 

I was able to mash the ScrollTrigger and ASScroll codepens together into a working example of the issue. You should be able to see the ScrollTrigger pins working perfectly, but no snapping to each panel. Any thoughts on how I can make snapping behave?

 

As always, thank you for all your help! 👍  I'm getting the hang of GSAP, but some issues are beyond my understanding still.

See the Pen BazemQY by julie-barkun (@julie-barkun) on CodePen

Edited November 19, 2020 by JulieAutobots
Fix post styling

[ZachSaucier]

Hey Julie. Thanks for being a Club GreenSock member. 

 

ScrollTrigger is doing its part of telling the smooth scroll library to update. You can see that by doing value && console.log(value) inside of the scrollTop function inside of the scrollerProxy.

 

I believe the core of the issue is that when ScrollTrigger tells the smooth scroll library to update, that then tells ScrollTrigger to update and they get in a cycle of this process. This is true even if you hook into the scroll event instead of the raf event of asscroll. Perhaps there's some configuration or setting in asscroll that lets you work around this situation and get snapping working but that's out of scope for these forums  Or perhaps another user can see an issue that I haven't seen.

 

Please do let us know if you figure out how to get it working or if there's anything that we can change to help accommodate this situation.