Scrolltrigger pin horizontal breaks subsequent animations

[BAM-Dennis 1 Likes (Newbie)]

Hey,

 

i have an issue with multiple gsap ScrollTriggers on a single page, when one of them is a pin. All animations BEFORE the pin work perfectly, but all animations after the are broken, because the triggers are offset.

 

See the attached codepen, which is based on an example i have found on the forums. I have extended it by another simple scrolltrigger animation. But as you can see, the markers AFTER the horizontal pinned section are completely wrong and fire too early.

 

Is that a bug or am i doing something terribly wrong?

See the Pen JjLEpQB?editors=1010 by dennismeissner (@dennismeissner) on CodePen

[akapowl 4,682 Likes (Superhero)]

 

Welcome to the GSAP forum, Dennis.

 

Since all the elements are inside that .wrapper you are pinning and thus inside that one pin-spacer, you will need to use the pinnedContainer property or else their positions will not get set correctly as they can not take into account any pin-spacing that was created beforehand. This is from the docs:

 

pinnedContainer

Element | String - If your ScrollTrigger's trigger/endTrigger element is INSIDE an element that gets pinned by another ScrollTrigger (pretty uncommon), that would cause the start/end positions to be thrown off by however long that pin lasts, so you can set the pinnedContainer to that parent/container element to have ScrollTrigger calculate those offsets accordingly. Again, this is very rarely needed. (added in 3.7.0)

 

[BAM-Dennis 1 Likes (Newbie)]

Thanks akapowl for your quick feedback.

 

First of all i must say, that my example was wrong. In my real world example i have pinned the section itself.

 

But after searching on the forums for a bit longer i found this topic:

 

That solved it for me. As it was although you, answering this topic, thanks again for helping out

 

 

[akapowl 4,682 Likes (Superhero)]

 

Ha, yeah I noticed that you were creating your ScrollTriggers out of order in your example - but since I figured that in this specific scenario it wasn't neccessary to mention because of that .wrapper element being pinned, I decided not to include a sidenote about that.

 

Even better you found the solution yourself  Happy tweening!