cotton Posted September 15, 2022 Share Posted September 15, 2022 Hello I've come across this a few times on recent projects and would like to see if there is a definitive way of dealing with the issue, and if it is actually an issue. I tend to build modular CMS sites where the content editors can build pages in whatever order they see fit using those blocks. Some of the modules will have ScrollTrigger elements in so they can have pinned/animated blocks where they need. As I understand, the order that the ScrollTrigger functions are placed in the scripts has a bearing on how and when these pinned sections are calculated. Now, if I am allowing the client to add a pin section in a different location each time (i.e. sometimes it will come after a horizontal scrolling carousel, sometimes before etc) how can I make sure that the order the pins are created is the order they are in the DOM? I seem to get a lot of pin starts and ends being offset incorrectly which obviously then has a knock-on effect with all the other ScrollTrigger calculations. Is there a really simple way to sort this that I've missed? Perhaps a ScrollTrigger.refresh(); once all content is loaded or would that cause some unsightly visual issues? Should I be adding a script tag directly into the module template code rather than in a main js file so then it is called on the page as and when needed? I'd offer up a pen but all the elements work fine individually, just not always when the order is more dynamic. Thanks in advance Link to comment Share on other sites More sharing options...
Rodrigo Posted September 15, 2022 Share Posted September 15, 2022 Hi, You could take a look at refresh priority property and the sort method and see if that helps. Scroll down to Usage & special properties (they are in alphabetical order, so go to R ) : https://greensock.com/docs/v3/Plugins/ScrollTrigger https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.sort() Now for what you describe, it seems kind of logical that your users will add one section after the other and ScrollTrigger should look them in that particular order, unless the JS code that emerges from the users creating the sections is not re-created every time and the new code is being added to the current one. It seems that your case is the latter. Hopefully this helps. Happy Tweening!!! 2 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now