Jump to content


Understanding how ScrollTrigger/Pins work with a flexible CMS

Recommended Posts



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



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 ;)) :





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!!!

  • Like 2
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.