Streaming live at 10am (PST)

Animation breaking on browser tab switch


#1

Hey there!

I have an issue with a multi-step animation (around 20 seconds long) for a landing page header.
Published site: fred-knows.webflow.io
Read-only: https://preview.webflow.com/preview/fred-knows?preview=c305927df01a45ef720c635e41492129

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 :cry:

Any help would be much appreciated!
Thanks,
Dan


#2

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 :frowning:

But this is all fixed in the next (soon to be released) version of Interactions:

we are doing our best to release this as fast as we can so you easily build a timeline of animations without having to deal with the delay timers.


#3

Okay, got it.

@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)

Thanks for the help!


#4

maybe make it in after effects and upload it as a background video?


#5

You could create it in after effects, animate it, export it with bodymovin and render it on your site as an svg.


#6

That sounds good!

@bbrazis I checked out their export guide to get a rough idea of the process.

A couple of dumb questions as someone who doesn’t know JS at all:

  • How do I add the bodymovin.js library to Webflow?
  • For the bodymovin.loadAnimation script, I basically add that to the custom code section at the end of the header, right?

#7

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.


#8

This is partially correct. Only new events will not fire, so existing ones will complete, making them look out of sync.


#9

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.