Multiple scrolltrigger and timeline panel

[chrill]

Hello everyone,

I have a small problem that I think is due to a design problem or a problem with the scrolltrigger plugin. 
As you can see on the demo, I have a succession of blocks with either a mask animation or a panel animation. Indeed the mask animation starts before the end of the third layer of my panel animation. 

Do you have an idea? 

See the Pen dydYwNZ by cdeclerck (@cdeclerck) on CodePen

[GreenSock]

That's because you're not creating your ScrollTriggers in the order they appear on the page and you didn't set any refreshPriority. 

 

You're creating the pin for the very bottom BEFORE you create all the slidePanels which are above it, thus when it creates that pin it doesn't know about all the stuff before it that'll push it down further on the page, so the start/end values aren't calculated properly. 

 

Here's one approach you could take with setting a refreshPriority such that the bottom pin gets refreshed last:

See the Pen qBxboNe?editors=0010 by GreenSock (@GreenSock) on CodePen

[chrill]

Ah yes, I understand better. However, what I didn't mention is that I'm not supposed to know the position of each element. I could have a panel before a mask or vice versa.
The only solution I found for the moment is to refresh the scrolltrigger of my timeline at each creation (this solution refers to this topic:

) but I find it a bit dirty.

[chrill]

Do you think I should redesign my code in this way. 
I loop over all my pinned elements and detect the type of animation I need and set the refreshPriority at that point. What do you think about it ?

See the Pen zYRrWpQ by cdeclerck (@cdeclerck) on CodePen

[GreenSock]

23 minutes ago, chrill said:

The only solution I found for the moment is to refresh the scrolltrigger of my timeline at each creation

That sounds pretty gross to me .refresh() is a performance-intensive method to call. 

 

8 minutes ago, chrill said:

I loop over all my pinned elements and detect the type of animation I need and set the refreshPriority at that point. What do you think about it ?

That's probably fine. There are many ways to do it. You could probably even try using refreshPriority: -element.getBoundingClientRect().top