The Multi-state component

The Multi-state component allows you to create an animation on an object or a part of the screen using transitions.

The Multi-state component is a very flexible component. It allows you to create multiple states of an object or a set of objects. With this component, you can create your UI elements such as buttons (with animation effects), toggle buttons, drop-downs, and many other animations.

In the example, the Multi-state component includes 2 states:

a first state where the content bubble is present but not visible (opacity at 0%),
and a second state linked to the first where the content becomes visible (opacity at 100%). The multi-state displays the corresponding state upon clicking the button.

💡 It is essential to master transitions and related states to create animations using the Multi-state component. We recommend you first read this article: Transitions.

Insert a Multi-state component

Click on Components and choose Multi-state.

Double-click on the component area to edit the content: a first state is automatically created. You can insert any type of content inside: images, shapes, text, and even components.

Add new states

To create appearance and transition effects, it is necessary to create new states. If you want a transition between these states, they must be linked.

You can create an unlimited number of states and navigate between your states from the left window.

Set a default state

In the properties, you can select a default state, which is the state that will be automatically displayed when the component loads. If you do not set anything and the user returns to this screen, the component will be in the last displayed state.

Change the Multi-state component's state

Like any component, it is possible to use the Multi-state component as a trigger or to add actions to this component.

To change the state of this component, select a trigger (for example, a button) and select the action Act on a component. Select the Multi-state component, and you have the following actions to choose from:

Select a state: select a state from the list
Next state: you can set an interval and activate the Loop mode
Previous state: you can set an interval and activate the Loop mode
Random state

To trigger an action from the Multi-state component, select this component and open the Actions window. In addition to the standard triggers (Click, Mouseover, Key...), you can trigger an action upon the display of each state. This way, you can automatically change the state without user interaction.

Examples of using the Multi-state component

Hover button

Create two linked states and create a state change action on mouseover and another on mouseout.

Toggle

Create two linked states and create a state change action on click.