Issue writing several scrollTriggers

[Michaël Garcia]

On the back office of my website, the client can build pages using modules in the order he wants (for examples he can creates several horizontal scrolls or several pined sections)

 

On the front side, I do something like this : 

 

// declarations

document.querySelectorAll('.slider').forEach(slider => {
  // my scrolltriggers
  gsap.to('....', {
    scrollTrigger:slider,
    ...
  });
});

document.querySelectorAll('.horizontalScroll').forEach(horiS => {
  // my scrolltriggers
  gsap.to('....', {
    scrollTrigger:horiS,
    ...
  });
});
  
ScrollTrigger.refresh();

 

Unfortunately I can't chose the order of the sections in the DOM and I noticed it creates weird issues (regarding the start and end positions of all my scrollTriggers) . Even if I refresh all my scrollTrigger in the end, a lot of the trigger are not correctly set. 

 

Does anyone has good advices to prevent this behavior ? 

Thanks a lot. 

 

 

[OSUblake]

Hi Michael, 

 

Have you tried using sort? That can help out when stuff is created out of order.

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

 

[Michaël Garcia]

Thanks a lot for your answer. 

I didn't know this method. I'm gonna dive into it!