Hei there. I noticed this issue before in some of my graphics: Please have a look at this infographic about cannabis use. Wait until the end and look at the smoke. The smoke is built out of one symbol that starts a couple of instances of another symbol on its part at staggered intervals. Everything´s fine, but - when I go to another browser tab or toggle between applications and come back to the infographic tab the animation gets more and more synchronized - means: in the end there are no intervals left. The threads of smoke start all simultaneously. Weird...
The issue is that when a webpage isn't shown (like showing a different tab), then JavaScript stops. When the page is shown again, then the animation needs to look at the large time difference and decide what to do.
In this case, all the running timelines are long past their end. So all of them run through their actions to catch up, which has a start timeline on them. Therefore, all timelines are now starting at the same time.
The way to fix this on Hype's end would be to tick through every missed frame of time. Basically, to run it like in real time, but as fast as it can. This could be very computationally expensive leading to long hangs (or even crashes on iOS) when returning to a page. People sometimes return to pages after days or even weeks, so that makes this solution infeasible in a lot of cases. Also, if there's the case that if animation frames take a while to render (perhaps longer than one frame's worth of time), it may never catch up.
Due to the interactive nature of Hype, there's no great solution on the Hype side for the problem you're hitting unfortunately. I think @MarkHunte's solution is the way to go .
Thank you Mark and Jonathan for analyzing this. Marks solution doesn´t really fit my needs, since it creates a gap after each cycle. Therefore it was a a conscious choice from me, triggering the Symbol-Timelines inside each smoke symbol and make them independent from each other and from whats going on on the Main Timeline. This results in a much smoother animation process (I often come across this problem, e.g. when simulating rain, hail etc...).
The issue is that when a webpage isn't shown (like showing a different tab), then JavaScript stops.
... but why should the repetitive startTimeline command on the Main Timeline work then? Obviously it does...
So I chose a different approach: I initially start an setInterval for each smoke symbol - and surprise - it works! Hence, JavaScript doesn´t seem to stop completely - at least the setIntervals keep on working...
My answer was perhaps an oversimplification . Hype generally uses requestAnimationFrame which typically does not fire when a tab is hidden. Other timers like setInterval/setTimeout are usually highly curtailed and not guaranteed. This documentation seems to indicate most browsers put their max fire rate at 1 second. I'm not sure this is spec'd though - I'd guess browsers change behavior a lot in efforts to conserve battery life. Of course, Hype has some uses of setTimeout for various things as well, so there's probably a smidge of hodge-podge behaviors...
Yep, you´re right concerning Safari. For me it works perfectly in Chrome and even in Edge, Firefox has slight glitches but works in principle. Funny...