Jump to content


Pinspacing and order

Moderator Tag
Go to solution Solved by mvaneijgen,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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

  • Like 2
Link to comment
Share on other sites

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 😅

  • 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.