Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Fresh load behaves differently from cached load

Recommended Posts

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.

Link to comment
Share on other sites

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!

  • Like 6
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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



  • Like 5
Link to comment
Share on other sites

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!



  • Like 8
Link to comment
Share on other sites

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

  • Like 4
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.