GSAP loading before files load in

[Sam Smyth]

I'm having an issue where my GSAP script seems to be loading in earlier than it should. This causes issues where the triggers don't line up properly.

 

I wish I could create a minimal for this, but it's not that kind of issue - I appreciate any help but understand if it's out of the scope of this forum.

 

I'm having to use an unfortunately bulky WordPress theme that loads in a lot of files. I believe one or more of these files are moving elements around after my GSAP script loads. I saw this comment that shows how to load my scripts after the DOM and window are loaded. I believe the files in my case are loading asynchronously/after the window loads, so I still have a problem. If I use a setTimeout function and delay my GSAP code a few seconds, the triggers line up, which is why I believe this is the problem.  

 

Is this a common problem? How do I ensure that my code runs after elements have stopped moving around? Delaying my code from loading for a few seconds doesn't seem like a good way to do this.

 

It is difficult to replicate this problem as it weirdly doesn't seem to happen every time, but if you navigate to different pages and then back to the home page, you will likely see the issue. Especially in a private browser. I've also attached an image - the left image side is working properly, the right is where the triggers are pushed down the page.

 

My code for this piece is simple:

let text = gsap.utils.toArray('.animation p, .animation h3, .animation h4, .animation h5, .animation h6');


      text.forEach(blocks => {

        gsap.from(blocks, {
          scrollTrigger: {
            trigger: blocks,
            start: "top 90%",
            markers: true
          },

          y: 50,
          autoAlpha: 0
        })

      })

 

Here is the test site, with markers on: http://staerkhair.shapedesign.ca/

 

Thank you!

[OSUblake]

Hi Sam,

 

It's a bit out of the scope of this forum troubleshoot live sites. The only thing I can really recommend is to make sure your GSAP code runs last, although I don't know how to do that in WordPress. Whatever scripts are running after your gsap-custom-js file here might be messing up the layout after ScrollTrigger has calculated where everything is.

 

 

 

Also, it's a good idea to refresh ScrollTrigger after your images have loaded or your layout might have shifted. I don't know if this will help, but give it a shot.

 

window.addEventListener("load", () => ScrollTrigger.refresh());

 

Good luck!

 

[Sam Smyth]

Thanks for the tip, @OSUblake! Totally understandable about it being out of the scope.

 

It does help and  gives me some more ideas. Unfortunately, I believe the something is being run after the window has finished loading.