Jump to content


ScrollTrigger pinning sections - unknown order

Go to solution Solved by Rodrigo,

Recommended Posts

Hi there, I am hoping someone could help me.


I am using ScrollTrigger to pin different blocks with their own ScrollTrigger's and animations.


My issue is, on page load, the ScrollTrigger pins aren't where I expect them to be per block (some overlap, or wrong altogether).


I found some forum info on ScrollTrigger.sort() and ScrollTrigger.refresh(). ScrollTrigger.refresh() works intermitently, and not sure how feasible ScrollTrigger.sort() is when not knowing what the order of ScrollTriggers need to be created in.




Have no CodePen link as this is a general question about ScrollTrigger ordering when not knowing the order.


Would love some thoughts on the above!


Thanks in advance,


Link to comment
Share on other sites

  • Solution



Maybe you should take a look at the Refresh Priority config option. From the ScrollTrigger docs:



number - it's VERY unlikely that you'd need to define a refreshPriority as long as you create your ScrollTriggers in the order they'd happen on the page (top-to-bottom or left-to-right)...which we strongly recommend doing. Otherwise, use refreshPriority to influence the order in which ScrollTriggers get refreshed to ensure that the pinning distance gets added to the start/end values of subsequent ScrollTriggers further down the page (that's why order matters). See the sort() method for details. A ScrollTrigger with refreshPriority: 1 will get refreshed earlier than one with refreshPriority: 0 (the default). You're welcome to use negative numbers too, and you can assign the same number to multiple ScrollTriggers.


You can give your specific sections a data attribute to set each one's priority on the refresh order and use it as the docs recommend.


Hopefully this helps. If you keep having issues, please remember to include a minimal demo.


Happy Tweening!

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Hi Rodrigo,


Thanks for the reply.


That was exactly what I was looking for! I have hard coded the ScrollTriggers refreshPriority for a page I have created myself, knowing the order and it worked like a dream.


I will look at automating an ID for these to determine their order of priority.


Thanks again,


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