Multiple ScrollTrigger with pinned elements on top give wrong start/end position

[jordanq]

Hello,

 

I'm struggling understanding why (as you can see in the CodePen attached) my second ScrollTrigger get a wrong start offset because of the one on top. 

I tried to refresh but even if markers seems to be well positioned after this the 'enter' event is still not well placed on top of its elements (card)

I saw in the documentation about binding a timeline but I need this .batch to animate "staggeringly"

Thanks in advance 
 

See the Pen dyRRJOj?editors=0011 by joquiqueret (@joquiqueret) on CodePen

[akapowl]

Hey @joq- welcome to the forums.

 

That looks to be the case because in your CSS you initially position them 'top: 150px' - the trigger will simply just be set to where that top is.

 

As it is better (performance-wise) to tween on y-translates instead of top anyway, I removed the top seting in your CSS and used a fromTo tween with a y-translate. Usually it's even best if you could avoid also tweening on the y of the element that is set as a trigger-element for a ScrollTrigger, too, as that can lead to other problems - but here things to work just fine that way. Does that work for you?

 

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

 

 

 

Edit: I think I totally misunderstood.

What you are probably referring to actually appears to be the case because you have pinSpacing set to false.

Is there a particular reason you need the pinSpacing: false?

[jordanq]

Ok Akapowl thanks for your reply

 

In fact my mistake the precedent version of my CodePen was not accurate. Problem seems to appear when the card list container is inside the one who was previously pinned. As you can see it create an offset equivalent to the amount of pixel represented by the duration of the pinned state.

 

 

(see updated CodePen above)

[akapowl]

That is because since all those elements you have ScrollTriggers on would be withing that .wrapper then, which you are pinning, but have no pinSpacing to take into account for the accurate positioning. Setting a pinnedContainer: '.wrapper' to your .batch() would do the trick here.

 

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

 

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)

 

 

There will still be white space at the bottom of the page now though, likely because of the handling of the top - so I myself would probably still go the suggested y-translate route alongside an overflow: hidden on the .cardList.