two ScrollTriggers - snap & pin Problem

[Leolo]

I try to get some vertically scrollable sections that snap softly animated with ScrollTrigger 1. One section (3rd in this example) thereby serves as a ".container" for some panels (red and green in this example) which are scrolled horizontally (ScrollTrigger 2) when the container is entirely in the display.

The following sections below should then be scrollable with the snap in the same way as the first sections. Important to say, that I don't want the snap to continue for the horizontal scrolled panels in the container-section. Best would be a solution for content of variable total length inside the container-section. I tried a lot of the similar examples that I found here, but I wasn't able to make them work with the snap-effect and non-snapping panels at the same time. Probably a common mistake. Thank you very much for helping!

 

See the Pen vYRwPZv by leolos (@leolos) on CodePen

[GreenSock]

It is indeed a tricky thing, but you can use a custom snapping function to run your logic. Here's how you could have it snap to each panel in both vertical and horizontal directions: 

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

 

If you want NO snapping at all during the horizontal one, you could add custom logic to sense when it's between that ScrollTriggers's start/end, and then if so you'd just return the value that was passed into the snapping function (unaltered). 

 

Does that clear things up? 

[Leolo]

12 hours ago, GreenSock said:

It is indeed a tricky thing, but you can use a custom snapping function to run your logic. Here's how you could have it snap to each panel in both

If you want NO snapping at all during the horizontal one, you could add custom logic to sense when it's between that ScrollTriggers's start/end, and then if so you'd just return the value that was passed into the snapping function (unaltered).

Does that clear things up? 

Thank you very much for your help!
I will now need some time to think about and implement the tips because I have relatively little experience with js and gsap. Only after my post I read that nesting the ScrollTriggers is not a good idea anyway. Ouch. Thanks for helping anyway. As a quick fix, your variant with snap for all sections also helps me a lot.