ScrollTrigger - adding to class not working on multiple

[chailandau 4 Likes (Newbie)]

I've been running into this issue with ScrollTrigger, where a single instance of my array works, but multiple do not.

 

 

Here is one that works with only one instance:

See the Pen ExQyyMJ by chailandau (@chailandau) on CodePen

 

I've looked on the forums and not found anything that helped me, would love some insight!

 

Multiple instances do not work:

See the Pen LYQZZdK by chailandau (@chailandau) on CodePen

[OSUblake 18,400 Likes (Superhero)]

Hi chailandau,

 

It works, but you have multiple triggers nested inside an element you are pinning. Perhaps you are looking for pinnedContainer?

 

Quote

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)

 

See the Pen abqZmLO by GreenSock (@GreenSock) on CodePen

 

[chailandau 4 Likes (Newbie)]

That was it, thanks so much! That makes sense now that I think about it