Issue with multiple ScrollTriggers / Pinned sections

[Pageking]

Hello friends!

 

I have a very specific issue with a project I'm working on. There are multiple sections that get loaded in dynamically and to be rearranged by the end-users, hence the foreach loop I've used on the different types of sections. I've attached a small demo with the exact same problem I'm facing on the project. I would love to hear your input on this.

 

Thanks!

See the Pen QWPQQgP by nils-pageking (@nils-pageking) on CodePen

[Rodrigo]

Hi,

 

Yeah, this is a problem based on the order the ScrollTrigger instances are created doesn't match the order they appear. Ideally ScrollTriggers should be created in the order they appear, if that is not possible you can use the refreshPriority config option:

 

refreshPriority
number - it's VERY unlikely that you'd need to define a refreshPriority as long as you create your ScrollTriggers in the order they'd happen on the page (top-to-bottom or left-to-right)...which we strongly recommend doing. Otherwise, use refreshPriority to influence the order in which ScrollTriggers get refreshed to ensure that the pinning distance gets added to the start/end values of subsequent ScrollTriggers further down the page (that's why order matters). See the sort() method for details. A ScrollTrigger with refreshPriority: 1 will get refreshed earlier than one with refreshPriority: 0 (the default). You're welcome to use negative numbers too, and you can assign the same number to multiple ScrollTriggers.

 

You can combine that with the sort method:

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

 

So when the user either adds a new section or re-arranges the current sections use the refreshPriority option and then sort and refresh ScrollTrigger, something like this:

const addSection = () => {
  // After adding a new section
  
  ScrollTrigger.refresh();
  ScrollTrigger.sort();
};

const moveSection = () => {
  // After re-arranging the sections
  
  ScrollTrigger.refresh();
  ScrollTrigger.sort();
};

You should find a way to either add a data attribute for the sections in order to set a refreshPriority value when a section is added or when they are re-arranged and use that to sort them accordingly.

 

Hopefully this helps.

Happy Tweening!

[Pageking]

Thanks for the solution! This worked like a charm!