ScrollTrigger, Pinned + Subsequent Elements

[JChiappisi]

I'm having an issue in which my subsequent elements are getting triggered too early (note when the gsap-active class is getting attached to them, far before they are in view). Any ideas?

See the Pen ZExYJrP by jchiappisi (@jchiappisi) on CodePen

[akapowl]

 

Hello there and welcome to the GSAP forum!

 

49 minutes ago, JChiappisi said:

I'm having an issue in which my subsequent elements are getting triggered too early (note when the gsap-active class is getting attached to them, far before they are in view).

 

That is the case because you are creating the STs to toggle the class before you create the ST that pins the first section - so at the time you created all those toggleClass STs, their positions were right - but they can not know ahead of time about you pinning that first section later on in your code, which adds a pinSpacer and thus shifts all the positions of the elements related to the subsequent ScrollTriggers) That is why the positions of the subsequent STs will not be where you'd want them to be in the end.

 

It's best to always try and create your STs in order of appearance on the page. If you can't because e.g. it might be more conveniant to create your STs in loops like you do here, you'll want to have a look at the .sort() method and/or refreshPriority - explanations on the latter are to be found on that .sort() docs-page or in the general ScrollTigger documentation

 

Simple suggestion to work around your problem: call ScrollTrigger.sort() after you created all your STs. That should already help in this scenario.

 

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

 

 

[JChiappisi]

Thank you so much! It makes absolute sense.