ScrollTrigger and CSS Scroll Snap

[Maz]

Hi!

I have three sections inside a container and I want to use CSS scroll snap to navigate between these three sections. Each section will have custom animation and I want to trigger them with ScrollTrigger, but I can't! 

 

Can you please check and give me a hint how can I achieve this? 

 

Thank you!

See the Pen KKgLvqZ by maz-momtaz (@maz-momtaz) on CodePen

[ZachSaucier]

Hey Maz. The reason it's not working is because you're not using the default scroller. When that's the case, you need to use the scroller property of ScrollTrigger to declare which scroller it should use instead like so:

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

 

You can set it as the default for ScrollTrigger if you know most of your ScrollTriggers will be using that instead of the default scroller:

ScrollTrigger.defaults({ scroller: ".container" });

 

I also recommend that you read my article about animating efficiently and the most common ScrollTrigger mistakes if you haven't already as you're close to making some of the mistakes that are covered  

[Maz]

Thank you Zack for the hint! 🙏

 

One more thing I would like to share. I tried to follow the example on this pen I found in Scrolltrigger documentation :

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

 

While it's working perfectly on Edge, I experienced some issues on Chrome on Windows. Some sectiones skipping on my browser. It's look like there is a bug in Chrome when you apply scroll snapping on html:

 

https://stackoverflow.com/questions/61726927/scroll-snap-css-skipping-elements

 

Thanks a lot!