Bubble Docs

Handling Conditionality

You can control how page elements behave and appear under certain circumstances, for instance, show a 'Log out' button if the user is logged in, or change the color of a button when the user hovers it. You define these conditions and the properties to be altered in the Conditional tab of the element's Property Editor.

Defining conditions

When you edit an element (by double-clicking on it), you can see the Property Editor. The Appearance tab defines the general behavior of the element, and the Conditional tab is where you can define some conditions that will apply to this element in Run-mode.
A condition is composed of two different things:
  1. 1.
    The condition itself, that defines when the properties defined in point 2 applies. In the example above, this is Current user isn't logged in.
  2. 2.
    The properties that should be modified when the element meets the condition defined in point 1. In this case, the element will not be visible.
Note that the the condition can be comprised of almost any data source, but must end up being a yes/no expression. If it does not, it will be reported as an issue by the Issue Checker. If more than one condition is true for an element, all conditions will be applied. If two conditions or more have contradictory properties (i.e. the same property is modified in different ways in two conditions or more), the last one wins. Thus, you can control the order by clicking on 'move up' or 'move down'.

Previewing conditions

When editing an element's condition in the Editor, you can click ON/OFF to artificially put the element in that state for editing purposes. This has no effect on the element in Run-mode.
Our Academy quick tip on how to preview conditions on an element

Run-mode debugging

As an element can have more than one condition, several conditions can be evaluated to yes on the same element. You will often have to debug an element's behavior when it involves conditions to understand its behavior, we recommend using the Debugger to inspect an element and figure out which condition is evaluated to true and how it impacts the element's appearance.


Watch our Academy quick tip on how to animate changes in an element's properties
Property changes, when a condition's evaluation changes from no to yes, or the other way around, are immediate. If you want some properties to change gradually, you can define some transitions rules in the third tab of the Property Editor. This is useful if you want to give a more fluid feel to your user interface.
For instance, in the illustration below, the background color will change from the initial value to the final value in 200 milliseconds, following an easing curve. These transitions rules can only be applied to some visual properties. For instance, changing a text of a button cannot be modified gradually, while changing its color can.