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 https://codepen.io/sl77/pen/jOYEoNO
However, if i move up the last component to a different section, like here: https://codepen.io/sl77/pen/wvpBbpB , it starts to become jumpy, and the image overlaps the container even though it is set to 100vh