Rotating animation with Scrollsnapping

[gwineman]

Hey Everyone - I'm trying to create a rotational infographic with Scrollsnapping. The snapping should only take effect once the animation reaches the top of the screen. (There is content above the animation that I don't want "snapped").

 

Once I add the css to enable scroll-snapping, the scrolltrigger is a little unpredictable.  Also, once the main panel is pinned and I change the default scroller, I have a difficult time scrolling back to the top of the page.  

 

Any thoughts on how to make this work?

 

Thanks

See the Pen abwRmjL by ambidustrious (@ambidustrious) on CodePen

[GreenSock]

I think this would be a cleaner setup:

See the Pen gORBXXx?editors=0010 by GreenSock (@GreenSock) on CodePen

• It's usually not a good idea to have nested scrollable elements. I just made the main page scroll in my tweaked version, getting rid of that sub-scrolling one. 
• You can't do CSS scroll snapping if you want to have some parts of the page that don't snap. At least I'm not aware of a way to do that. So I switched to using ScrollTrigger's built-in snapping capabilities.
• I'm populating a single timeline and just sequencing the rotations using a helper function that you can just feed in a rotation value (to eliminate redundant code). 

Does that help? 

[gwineman]

This is fantastic - This makes complete sense. Thank you so much!