Fresh load behaves differently from cached load

[Rager]

I just uploaded a site I've been working on for a few months and just notice the intro animations (albeit they are off-center, still need to fix that, though that's not the issue I'm talking about) don't "bounce" in on a fresh page load vs when you already have some cached data on your computer. 

 

Here's the website I'm working on. http://www.maryannkuchera.com

 

Thanks for taking a look.

[GreenSock]

I don't have time to dig into this at the moment, and it's very awkward to try to troubleshoot a live site like this with many other scripts involved, but it's very unlikely that it's a GSAP thing. It sounds like it's more likely an issue with your code depending on assets being fully loaded but they're not. Like, for example, if you try to get an offset or a width/height or some other measurement BEFORE all the images finished loading completely, the reflow didn't happen yet and the measurements will be off. So make sure you don't fire off your JS code until everything is fully loaded. If you still need help, it'd be awesome if you could provide a reduced test case, like in codepen. We'd love to help - it's just tough on a live site. 

 

Happy tweening!

[Rager]

Thanks for your help, I was thinking something along those lines... I will have to take a look making sure all the assets are loaded first.

[Visual-Q]

Previous discussion about waiting until assets are fully loaded before animation starts. May help if it's a problem with assets loading.

 

 

[Jonathan]

Hello @Rager and welcome to the GreenSock forum!

 

Its always best to only run your animation when the DOM (HTML and or SVG markup is loaded and ready) and the window is fully loaded (images, links, fonts, stylesheets, js, and other media assets)

 

Try this so you only run your GSAP code when DOM and Window is loaded and ready:

 

// wait until DOM is ready (html and svg markup)
document.addEventListener("DOMContentLoaded", function(event) {
  
    // wait until window is loaded (images, external JS, external stylesheets, fonts, links, and other media assets)
    window.addEventListener("load", function(event) {
  
      // makes sure it runs after last render tick
      window.requestAnimationFrame(function() {
        
          // GSAP custom code goes here
        
      });
      
    });
});

 

Happy Tweening!

 

 

[Rager]

Thanks guys, this really helps. This forum is legit.