Animation halting on first frame with no error message

[Ian F]

Hey, everybody. I've been working with GreenSock for several months and have had great experiences, but today I'm stuck on a problem that I just can't puzzle out.

My latest animation works erratically. Sometimes it runs perfectly, but more often it halts silently on the first frame.
 

• There are no error messages in the console to indicate a problem.
   
• If I instantiate GSDevTools for my animation timeline, it shows the Global Timeline instead (as a 1000-second timeline that continues to run, but without anything actually happening in my animation.) (When the animation works correctly, as it does occasionally, GSDevTools shows the animation-specific timeline as it's supposed to.)
   
• If I restart the animation timeline from the console, the animation will continue and play out normally. (This is specific to the timeline I assigned this animation to. Restarting the global timeline has no effect.)

This animation is launched on arrival on the site, so it occurred to me that maybe there's some kind of race condition where something hasn't finished loading yet, although I don't know what it would be or why there wouldn't be a relevant error. I tried introducing a two-second delay before starting the animation, and that improved the success rate by a lot - but it still fails occasionally, and I'd really like to find the actual problem rather than work around it with an artificial delay.

If you would like to see the animation, you can view an earlier, mostly-working version here:

https://globalroboticslab.com

At this link, the animation will run twice the first time you load the site. That has to do with a "letter" that is shown the first time you visit the site. Once you dismiss the letter, it sets a cookie which prevents the letter from being shown again, so if you dismiss the letter and reload the page everything should work properly. (This is one of the issues I was trying to resolve with this rewrite, and is part of why I'm not simply going back to the way things were in the previous draft.)

The broken development version is here:

https://globalroboticslab.com/review/

A number of changes have been made to the code at that second link, including some changes to the way the animation is launched, but I can't see anything that seems like it would be relevant. (I've also commented out a whole bunch of code in order to simplify the way the animation is launched, in the hopes of isolating the problem, but without success.) If the animation halts on the first frame (as it usually does), you can enter "zwlt.restart()" in the console to start it up again.

This link will instantiate GSDevTools and also run the animation timeline at half-speed:

https://globalroboticslab.com/review/index.html?animationtimescale=2

For convenience, in case anyone wants to look at the code, I moved all the obviously relevant pieces to the end or almost to the end of /review/index.html and /review/main.js. The timeline for this animation is named "zwlt" and most of the timeline instructions are in the function named "startZWelcome()" near the bottom of /review/main.js.

Any suggestions would be appreciated. I'll watch this thread and respond if anyone offers ideas or has follow-up questions. Thanks to all in advance.
 

[ZachSaucier]

Hey Ian and welcome to the GreenSock forums. Thanks for supporting GreenSock with a Business Green membership! We couldn't do what we do without people like you.

 

This definitely sounds like a set up issue, not something directly related to GSAP which is what this forum is more focused on. Can you recreate the issue if you create a minimal demo on CodePen? That'd likely help you sort out what's relevant and what's not. Asking us to debug an entire webpage is a bit much for what we're able to do for free. If you're not able to create a more minimal demo (or simply don't want to) you could look into hiring someone to investigate your project itself.

[Ian F]

Zach, thank you for your response. I really appreciate it.

I probably went overboard in my original write-up, in an attempt to provide as much information as possible. What I'm really hoping for is just some ideas on why my animation might be halting on that first frame. I could pull the animation out into a CodePen, but the thing is, I'm fairly certain the problem isn't with the animation itself. It (usually) runs fine if I introduce a few seconds' delay before running it; it's only when I try to run it as soon as the site loads (it's triggered by a function called by the "onload" attribute attached to the <body> tag) that it crashes. (Also, I tried commenting out pretty much every piece of the animation, just to test, and it still halts on the first frame for no apparent reason.)

Any ideas anyone wants to throw out about why the animation might be halting on that first frame would be appreciated; no one should feel obligated to dig through the site code first. I've spent a long time trying to figure this out already and I'm stumped, so any suggestions for avenues to explore, even if they're just wild guesses, would be really helpful.

[akapowl]

Hey @Ian F

 

I already tried looking through all that when you initially posted, but I wasn't able to say anything that might be of help.

 

And I don't think, that this will be the most helpful either, but by accident, I made some sort of observation just now.

 

I barely even got the animation / timeline to play - maybe in one of 20-30 attempts.

 

But I now noticed the following:

If you're on that page of yours, hit F5 for reload, and instantly (it has to be really quick) after hitting F5 change over to a different tab in the browser; in 100% of all cases when then switching back to the tab with your page, the timeline will run. For me there is also a 100% chance of getting it to play, when right-clicking your links in the initial post and clicking on 'open in new tab' ( my browser won't automatically focus on that tab then, whereas it does, when I simply just left-click-open your links, and in the later case, the timeline won't play ).

 

Maybe this can help as a hint of some sort, to where the bug might be hidden.

 

[Ian F]

Thanks, akapowl - I'll think about what that might mean. I had noticed (but forgot to mention before) that my success rate in getting the animation to run is higher when I do a hard refresh, forcing all the page elements to download again - that may be related to your experience with a new tab.

My gut says there's some kind of race condition and if [mystery process] finishes before the animation runs everything is fine, but if not then the animation won't proceed. I just don't know where it is. Your note that you can switch to a different tab, come back, and the timeline runs also could support that theory - maybe switching to another tab gives the original tab time to finish loading [mystery process].

I'll keep digging. Thanks for your help, and more suggestions are still welcome!

[Ian F]

Just to close off this thread, in case anyone else finds it someday looking to solve a similar problem, I figured out the cause.

I had instantiated the timeline for this animation in the main Javascript file. I don't know exactly why this caused the problem described earlier, but once I moved the instantiation of the timeline into a function that gets called after the 'onload' event fires, my problem went away.