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
oooooo dang. thats a lot of interactions. At this time that is not perfectly possible on Webflow since the initializing of the animations happens at different times
@pixelgeek Do you have any suggestions on what I could replace the animation with outside of a .gif file? (assuming it would probably need to have an alpha channel)
So for bodymovin.js you should link to that in your before /body code area, and you would basically apply some data attributes to the div.bodymovin like data-animation-path="link to the json file", data-bm-renderer=svg, data-bm-autoplay=true, and if you want it to loop data-bm-loop=true.
You could post your js file and/or json file on github and link to it in your project, using this post.
And your questions aren’t dumb, this is definitely something that sometimes takes some trial and error to get right.
