Jump to content


ScrollTrigger vertical spacing help

Moderator Tag
Go to solution Solved by mvaneijgen,

Recommended Posts


I've been reading the docs/tutorials on scrollTrigger, but for the life of me I still can't get control around the spacing added when you add a pinned element. I get the concept that scrollTrigger adds extra space for the pinned elements, but I'm trying to create a site with pinned elements and I'm struggling to have items positioned correctly.


In my codepen example I have 2 'motif' elements and 2 'circle' elements. The circle elements are both pinned but are pulling the second motif animation markers up causing it to animate to early. You'll see in the code pen I've added the markers, so you can clearly see the 2nd 'motif' element markers are out of place, instead of inline with the 'motif' element, and I've also added a background color to the pin-spacer to try and visualise the extra space.


I'd like both 'motif ' elements to behave as the first one is. Any help would be really appreciated and any explanation on where I'm going wrong too. Thanks in advance.

See the Pen yLRWmwK by tobypowell (@tobypowell) on CodePen

Link to comment
Share on other sites

  • Solution

Hi @BKKT welcome to the forum!


It is importent in which order ScrollTriggers are created, due to how you loop through your ScrollTriggers and don't know when on the page it would be and thus in which order it should be created is not something you've influence on. 


I've found this pen which uses refreshPriority and a data-priority="3" on the html element to set a fixed refreshPriority, which is something you can use in your case. Hope it helps and happy tweening! 


See the Pen YzOMKJW?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

Link to comment
Share on other sites

@mvaneijgen That's amazing, it did the trick. I was trying to be clever and loop through my scrollTriggers after reading the common mistakes article, and completely missed the order being important.


Out of interest, would it be better to create each scrollTrigger in order, or is refreshPriority a better solution?


also any recommendations on decent places to learn more about scrollTrigger?


Thanks very much for your help and explanation, i've been stuck for a couple of days now. You got me out of a hole there 👍


Link to comment
Share on other sites

21 minutes ago, BKKT said:

Out of interest, would it be better to create each scrollTrigger in order, or is refreshPriority a better solution?

I think the refreshPriority is beter, because you don't know in which your order the site will end up, so if you have a dynamic way to set the refreshPriority, so that they are always in order it will be the most robust.


You could check the ScrollTrigger demo pages https://greensock.com/st-demos/ the Greensock YouTube channel https://www.youtube.com/c/GreenSockLearning/videos or our own @Carl's YouTube channel also has a lot of great content. https://www.youtube.com/user/snorklTV/videos

  • Like 4
Link to comment
Share on other sites

@mvaneijgen Thanks again for your help, advice and links, I really appreciate it.


Yes, I've paid for a subscription for snorklTv and can't recommend it enough.

Time to do some scrollTrigger nerding out!

Thanks again

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