I have an issue with a multi-step animation (around 20 seconds long) for a landing page header.
Published site: fred-knows.webflow.io
My problem is that, while the animation runs well when you’re viewing on the tab or when the tab is active in the background, once you switch tabs to something else for a few seconds and come back, the animation is completely off-sync and looks terrible. It’s also 100% reproduceable from what I’ve seen.
I’ve tried animating each of the five ‘bubbles’ with its own interaction, as well as using a single animation for the first bubble with several steps that each affect the respective bubble by itself. The bug runs the same.
I’ve also tried everything with loading on scroll, load, waiting for assets to load, etc, but nothing seems to work.
Google tells me this is an issue with resources allocated to each tab, and that the animation stops running once the tab becomes inactive, but in that case the whole thing should stop instead of just parts of it — so it’s possibly only affecting the Wait interaction?
I’m honestly considering just scrapping everything and going with a .gif file instead, even if it would look worse, just because of this bug
Any help would be much appreciated!