Dynamic ScrollTrigger Sections

[sbrack8t]

General approach question. I'm building a CMS theme that allows an admin user to select from a list of UI components that utilize Scrolltrigger for small animations like "fade in" but also pinned sections with more complex animations. Since it's dynamic, I can't determine the order before-hand and I'm running into issues where the start and stop positions are not in correct place. I'm assuming this has to do with refresh Priority and/or sort. Should these be used together? Also should I rerun ScrollTrigger.sort() after images are loaded or is .refresh() sufficient?

[GreenSock]

Are you able to ensure that things are created in the order they appear on the page? If not, make sure you define a "refreshPriority" for each one that indicates the order (higher priority should be higher on the page). If any ScrollTrigger has a refreshPriority defined, then ScrollTrigger.refresh() will automatically do a sort() (you don't have to call it separately). 

 

It's extremely unlikely that you'd ever need to manually call ScrollTrigger.sort() unless you create things out-of-order and don't define any refreshPriority values. 

 

Does that clear things up?

[sbrack8t]

The items are created in the order they will appear on the page. However the component order is determined by how the user lays out the page. Would it make sense to have function return a number for the refreshPriorty based on the UI component's index position on the page?

[GreenSock]

3 hours ago, sbrack8t said:

The items are created in the order they will appear on the page. However the component order is determined by how the user lays out the page. Would it make sense to have function return a number for the refreshPriorty based on the UI component's index position on the page?

refreshPriority isn't function-based; it should just be a number. So yeah, you'd need to create them accordingly.