Multi-state

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

The Multi-state component is a very flexible component. You can create several states of an object or a set of objects. Thanks to this component you can create your UI elements such as buttons (with animation effect), toggle buttons, drop-down... and many animations. 

💡 You must master transitions and linked states to create animations with the Multi-state component. We invite you to consult this article beforehand: Transitions.

Edit the Multi-state component

Click on Components and choose the Multi-state
Double-click on the component area to edit its contents. You can create new states and navigate between your states from the left window. 

You can insert any type of content into the Multi-State component (images, shapes, text and even components).
You can create an unlimited number of states.
In the Properties window, you can select a default state: this is the state that will be automatically displayed when the component loads. If you do not define anything and return to this screen, the component will be on the last state displayed.

Create actions with the Multi-state

Like any other component, it is possible to use the multi-state as a trigger or to act on this component. 
To trigger an action from the Multi-state component, select this component and open the Actions window. In addition to the standard triggers (Single click, Hover, Touch....), you can trigger an action when each state is displayed. 
To create an action on this component, select a trigger and the Interact with a component action. Select the Multi-state component and you can choose from the following actions: 
  • Go to a selected state
  • Go to the next state
  • Go to previous state

Use cases

Hover button

Create two linked states and create a state change action on the incoming hover and another on the outgoing hover.

Toggle

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

Drop-down

Pop-over

Still need help? Contact Us Contact Us