Animation glitch help

I’m using the perspective animations to show a regular group, but the ‘perspective left in’ animation keeps giving me this:

It appears as though the element I’m trying to display is being rotated almost as this glitch keeps appearing but to varying degrees of seriousness. If anyone has an idea what might be going on that would be very helpful. Thanks!

Edit: It appears as though this only happens when a custom duration is set on the animation for some reason, don’t seem to have any issues with custom durations on other animations which is annoying.

1 Like

Does this happen on different browsers? Are you seeing this same problem when you do the same thing on different pages?

There’s a chance it’s interacting with something on your page which is creating the adverse outcome. That said, it could also be a bug in Bubble.

1 Like

It does seems to be happening on different pages and browsers too, tried chrome, edge and safari so far. It’s behaving really weird, I put some text on and it seems to be flipping it

I’ve reported it as a bug just in case it is but hopefully we find out what it is soon!

1 Like

This is the same thing I describe here (along with explaining how you avoid it):

And here

This behavior is not necessarily a bug, but how the animation library implemented in Bubble seems to work. See my second link above for specific tip on what to do.


Thanks for sharing @keith. Very helpful.

1 Like

Hi Keith, thanks so much for your help, can I ask how you would make this work if its two separate workflows? as here:

I basically have a menu icon, that when clicked I want to animate in a group focus, and when clicked again to animate it out. I can’t seem to do an ‘only when’ on an animate step so I’m not sure I can put it all on one workflow. I’ve tried putting a pause at the beginning of each workflow at least the length of the other workflow but it doesnt seem to be working.

Any advice is appreciated!
Thanks again

I can’t say for sure. (Also, when you say “if its two separate workflows?” I don’t know if you’re referring to the fact that you have those 2 similar When workflows [in green] or you mean you have 2 steps in your workflow.)

But the idea I’m getting at is that your workflow must wait for the transition to finish (using a pause step AFTER your animation. My question about your 2 workflow steps you are showing here is:

“Is Button AboutUS actually on or in GroupFocus A?”

If that’s so, it could be that step 2 is stepping on step 1, if you get my drift.

I have no idea what happens if you are trying do animations on nested elements – frankly, that would seem like something that would never reliably work.

Here’s what I’d do to test:

First, get rid of step 2 temporarily.
Add a new step 2: a Navigate > Pause step set to at least 1500 ms
Test in run mode… does that fix the problem?

(Obviously, you’ll want to do the same / similar thing with the other when situation. I’m guessing one of these is the out animation and the other is the in animation?)

Once you’ve got this working more simply, you can fiddle with adding your old step (animating “About us”) back in. It’s possible that THAT step 2 is stomping on step 1, keeping it from completing.

Anyway, I hope you see what I’m saying.

BTW, I do not do a lot of this animated show/hide stuff as it just doesn’t work well. It’s just that I’ve experimented with it a lot and in those quick experiments it became obvious very quickly that you pretty much always have to include pauses after animation steps to ensure they complete.

IF step 2 does seem to be stepping on step 1, what you CAN do is actually DUPLICATE the workflow(s) – they will have the exact same When condition, but one version would have just step 1 (and a pause after, perhaps) and the other would have just step 2 (again, with an appropriate pause if required.)

I have no idea if that will work, but I’m just sharing my past observations here. Hope this is at least somewhat helpful to you.

(One more thought: There may be NO way to ensure that the hide and show do not stomp on each other prematurely EXCEPT by setting some custom state.

For example, in the workflow you are showing: You might need a new step 1 that does something like sets some custom state (a boolean) named something like “Animating In” to yes. After the pause step, you set that state back to no.

In your Animate Out workflow, you add another condition such that the flow cannot trigger while “Animating In” is yes. (Meaning you add an AND to the “only when” of Whatever’s Animating In is no.) You’d of course do the converse for the other flow (another custom state of Animating Out that you set to yes at the wf start and back to no at the wf end – again AFTER a suitable long pause step and add the requisite condition to the Animate In workflow).

That may not give you the user interface you desire as the user might click on the thing while animating and get frustrated that at that moment nothing happens and they have to click again. You’ll have to test.

Aside: it COULD be that this is a bug with animate. It does seem to me that – if a transition is not allowed to complete – it wouldn’t be unreasonable for Bubble to reset the transform on that element so that it’s back to its un-transformed state before doing anything else. I have no idea if that’s possible as I don’t know what library has been implemented here and what its quirks are…

Might be worth a bug report / enhancement request if you can build a good, simple example of how and why this is messed up. (what I’m saying is: build a new empty project that very simply shows how, even with pause state workarounds, you can’t ever get the behavior you desire… though I’m guessing you can actually make this work the way you want… might require a LOT of fiddling though!)

1 Like

Hi Keith, seems you’re definitely right about the problem stemming from animations not completing properly before being interrupted. After understanding this I ended up working out this fix using custom states which I’ll work through in case anyone stumbles across this thread with the same problem:

In the same workflow containing the animation, I made the first step set a custom state for my ‘menu icon’ (although this could be any element that clicking hides the element in question) - called it glitch and set its value to ‘freeze’. When the icons custom state is ‘freeze’, I made it unclickable. The last step in the workflow I changed the custom state back to ‘unfreeze’ which was the default, and thus the menu icon is clickable again. This means the full animation can play out with no interruption, as all the things that could interrupt it are temporarily unclickable.

I made sure to put the pause in as the second last step like you mentioned - at least long enough to allow all the animations in the workflow time enough to complete. This seems to be working well now for me, and we haven’t had any more glitching since doing this so it seems setting custom states is also a potential fix.

Cheers for your help

1 Like

Since this is specifically about on-screen actions (exactly the type of thing that Pause is actually designed to address), these caveats don’t actually apply. This issue is all about on-screen / client-side flows and the timing of those when animate actions are used.

1 Like

Glad you got that sorted! This has tripped others up, so make sure you mark this as solved by your very good explanation of what you did to ensure animations complete properly, @cha_james. :+1:

1 Like

This topic was automatically closed after 70 days. New replies are no longer allowed.