ScrollTrigger vertical spacing help

[BKKT]

Hi,

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

[mvaneijgen]

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

[BKKT]

@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 👍

 

[mvaneijgen]

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

[BKKT]

@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