scrolltrigger Having multiple Scroll Trigger pins on the entire page

[Zumpel]

Hello everyone,

 

I'm running into some issues with ScrollTrigger and could use some guidance. I'm trying to create multiple scroll animations where images slide in from the side. I managed to get this working by pinning the container itself (

See the Pen OPyBboy by zumpel96 (@zumpel96) on CodePen.

). However, this isn't the behavior I want, because I'd like all other content to remain pinned or "frozen". As you can see in my working pen, the other content continues to scroll.

 

I've also tried using a single common pinned container, but that approach doesn't work either:  

 

Wrapping only the "visible" part in a container isn't an option either. In my pen, there's content between the animated scroll containers that's visible for both. This means that content would need to belong to both the first and second scroll containers, which isn't possible.

 

Any advice or suggestions on how to achieve this effect would be greatly appreciated.

Thank you so much!

 

See the Pen empPJzY by zumpel96 (@zumpel96) on CodePen.

[mvaneijgen]

Hi @Zumpel welcome to the forum!

 

Create a common parent element, here I've create a .pinMe element and then give the second ScrollTrigger ad pinnedContainer of that element, so that it keeps track of the first ScrollTriggers pin element, see the docs for mor info https://gsap.com/docs/v3/Plugins/ScrollTrigger/#pinnedContainer

 

Hope it helps and happy tweening! 

 

See the Pen QwjZdrr?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.

[Zumpel]

Amazing. Thank you so much! That was exactly what I was missing.