In this Quick Tip, we’re going to learn how to animate a popup like this.

Normally to show a popup, you would use the Show action which will toggle the visibility of an element or a popup and use a default fade transition.

Here’s what this popup does with the Show action. To animate this instead, we'll search under Element Actions and click Animate. When we select the Sign up element, Bubble gives us tons of animations to choose from. However, not all animations are the same.

Callouts won’t show or hide, they’ll just animate the element. But any transitions with "in", will show an element, and anything without "in" will hide an element.

Since we picked Transition FlipYIn, this action is telling us our element will show at the end of the animation. Likewise, if we had the animation set to FlipYOut, after our animation played, the element would hide.

Finally, we can add a custom duration to this animation if we wanted to control how long in milliseconds it would take to play.

Now when we run the workflow, we'll animate to show the element.

That’s it for this Quick Tip, and I’ll see you in the next one!
​