Pinned section throwing off subsequent scrolltriggers

[Jamiem89]

Hey GSAP team.

I love, and have been using GSAP for a while now, but i've got a bug I can't seem to work out.

I've got a site with a few different scrollTriggers going on, including a section that horizontolly scrolls, and pins the rest of the page. My issue is that the pinned section seems to throw off any subsequent scrollTriggers. I've tried forcing ScrollTrigger.refresh() and a few other things I found in these forums but I can't seem to get rid of the bug.

 

I've included a stripped back codepen to make it easier to understand what I mean.

 

Thanks for your help!

See the Pen MWQxLBd by jamiem89 (@jamiem89) on CodePen

[elegantseagulls]

Since you're pin contains your next animation, it's not longer tied to a viable scroll position. You might look at this for its "containerAnimation" or "isInViewport":

 

[akapowl]

Welcome to the GSAP forum, Jamie.

What you actually might want to have a look at is the pinnedContainer property.

 

Since you are pinning the whole container, the subsequent ScrollTriggers can not take any pinning  of previous elements into account, as they are within that same pinSpacer element.

You'll need to set it on any subsequent ScrollTrigger within that same element, following the pin.

 

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. Important: nested pinning is not supported, so this feature is only for non-pinning ScrollTriggers (added in 3.7.0)

 

Additionaly (although not too relevant in this case, since you only tween on the x-axis), you shouldn't tween on the element, that you are using as the trigger; it might lead to unexpected positioning of the ST when you change the element's position on the page. Just wrap it in another element, and use the wrap as the trigger instead.

Lastly, you should make sure that you have enough scrollable space for the ST to trigger - the way you had the start value set, for me the tween was never triggered in full-screen view, so I changed it to 'top center' instead in my fork of your codepen. I also changed the toggleActions a bit, so it reverses onLeaveBack to make it appear more than just once for showcasing purposes.
 

I hope that will help. Happy Scrolling.

 

See the Pen BaGLbvG by akapowl (@akapowl) on CodePen