Jump to content


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

Go to solution Solved by akapowl,

Recommended Posts



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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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)

Link to comment
Share on other sites

  • Solution

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.


  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.