Pinspacing and order

[longstoryshort]

Hi, I'm having trouble with scrollTrigger pin order. The sidebar pin end is calculated before the pinSpacing of the other scrollTrigger is taken into account. I've seen the below link but it looks like they are created in the correct order but it actually doesn't seem to make a difference which is created first. I've tried refreshPriority but that doesn't seem to help. I'm probably just make a stupid mistake but I can't figure out what it is.

 

See the Pen LYJNQzO by sleelss (@sleelss) on CodePen

[mvaneijgen]

I think the issue is that you are using the end trigger that you are also pinning in the previous ScrollTrigger. As a general rule of thumb is that you should never animate your trigger element and that goes the same for pinning it. 

 

Below a fork of your pen with the #top element (instead of the #hero element) as your trigger for the second ScrollTrigger, to me that seems to be a better approach. I'm not 100% clear of what your end result should look like, but I hope it helps and happy tweening! 

 

See the Pen yLxOjeq?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

[longstoryshort]

That's it. Thanks so much. I thought it must be something annoying like that. And yes, looking back, it wasn't exactly the clearest brief 😅