ScrollTrigger pinning sections - unknown order

[jackkemm 12 Likes (Newbie)]

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,

Jack

[Rodrigo 5,097 Likes (Superhero)]

Hi,

 

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

 

refreshPriority

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!

[jackkemm 12 Likes (Newbie)]

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,

Jack