How to have multiple scrolltriggers with different pinned elements on one page - keeps jumping around

[_username7777]

I have a page where the user can add different sections in the CMS. These are then loaded on the page, a lot of them use scrollTrigger. 

When I just have one scrollTrigger component on the page, it works great, however when there is more than one, it starts to become really jumpy and bugs out 

I know you can create timelines, but I'm not always sure of the order in which the user will upload the different sections. If i've understood the docs correctly though, this shouldn't matter and its just triggered when the element comes into the viewport? 

I've made a codepen, where i've combined the different examples of scrollTrigger I am using and it works ok 

See the Pen jOYEoNO by sl77 (@sl77) on CodePen

However, if i move up the last component to a different section, like here:  , it starts to become jumpy, and the image overlaps the container even though it is set to 100vh

See the Pen wvpBbpB by sl77 (@sl77) on CodePen

[OSUblake]

Hi _username,

 

You need to create your ScrollTriggers in the order they appear...

 

 

Or you can try sorting them.

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.sort()