Transcript

In this Quick Tip, we’re going to set up element transitions.

When you have a button and a conditional that says when This Button is hovered, change the Background color, you get this: a very abrupt change from one background color to another. With transitions, you can ease into this change with different animation curves.

First, we select the property we need to transition. Background color is combined with other background settings like offset and shadow, so we add a transition for general Background styles. Then, we'll set the Duration from 200 milliseconds to 1000 milliseconds and leave the default animation curve to Ease. Now when we preview our app, we get this: an ease transition at a slower duration.

We can add another property to the hover conditional and include the Font color, if we wanted, and add that transition as well. For this animation curve, we'll set it to something like Step-start.

Experimenting with these curves, timings, and transition effects will help you design a more modern feeling and interactive app.

That’s it for this Quick Tip! For more, be sure to check out bubble.io/academy.