How do Transitions work?

I want a button to change colors periodically without any input. Like a flashing bulb, Black-White-Black-White…loop.

I understand “transitions” is the setting for this as below (?) I can see I can change background colour but how do I define which colour to change to ? If my button is black how do I set it to change to white in 200 secs and back.

Hello @Prashant :slight_smile:, You would define the color in the “Conditional” tab. For example, with a black button, which changes to white when the button is hovered, the conditional statement could be:

Then in preview mode, when you hover over the button, the transition setting will cause the button to ease from black to white. When you stop hovering the button, the background color of the button will ease from white to black. Increasing the duration will slow down the speed of the transition.

Thanks fayewatson.

But I don’t want any input action for it to change colour (like hovering or clicking). I just want it to periodically change colour like a flashing bulb. Could this be achieved with Transitions or any other way ?

I’m not sure if this is the best way to accomplish this, but here is a forum example which uses custom states and custom events in order to create the flashing bulb effect.

Preview:

Editor:

I couldn’t use custom states only, because they seemed to cancel each other out and not make any changes visually. In this example, each custom event sets the custom state of the button (the custom state is called “Color”). In order to create the custom state “Color”, in the action part of the custom event workflow I selected: (Element Actions → Set State → Element: Button, Custom state: create a new custom state:

And set the value to “White”:

After the state is created, we need to tell Bubble what properties the button should have when its Color custom state’s value is “White”:

Here we’re just telling Bubble that when the Button’s custom state (Color) value is “White” → change the button’s background color to white and the text to black. The other custom event changes the value from “White” to “Black”. We don’t need an additional conditional statement such as “When This Button’s Color is “Black”” (you could if you prefer it of course!) because the button has a black background and white text by default, so Bubble will automatically apply the default settings when the state is anything other than “White”. Then, make sure the transition time is at least 1500, and this should produce the flashing bulb effect.
I know custom states and events can be tricky when first using them - if any of this was confusing or if you need any help setting this up in your app please let me know. :slight_smile:

2 Likes

Hi @fayewatson

That’s exactly want I want. I am very thankful for your detailed example. I am currently looking into your solution and on your public page.

It’s late here and I am signing off for the day. So I will try it in the next few days and let you know how it goes. But marking as resolved as this seems to be the best approach.

Once again , thankyou !

1 Like

Awesome!! My pleasure @Prashant! :blush:

1 Like