Transitions are used to create a smooth animation between the different states of a screen or an object. Customize the initial and final states of your animation, add a delay, a duration and choose an animation type (easing or spring) to get the ideal result.
In this article
Type of states
- The simple state is independent: it allows you to create different layouts but you cannot customize the transition.
- The linked state keeps all the characteristics of the initial state. All objects are linked between these two states and any changes made to the initial state apply to the final state. This is how you create transitions.
Characteristics of the linked states
- Size & Position
⚠️ If you import a new object into the linked state or cut/paste an object between two states, the links are broken and the object becomes totally independent. No transition will be possible on this object.
Here is an example of a transition on a home screen - it gives dynamism and modernity from the start of the application.
Prepare the initial state of your screen: insert the objects and prepare the design.
Go to the Screens window and click on the orange button to create a linked state.
- In this linked state, change the layout of the elements.
- Choose the trigger for this transition in the Actions window:
If the transition is automatically triggered, select the state and the Display State trigger.
If it is linked to a user action, select the object and its trigger event.
- Choose the action: Change screen state > Go to next state. You can add a delay, a duration, an animation type, an interval and activate the Loop mode.
Insert a Multi-state component
Prepare the initial state of your button (yellow background)
Click on the orange button to create a linked state.
In this linked state, change the color of the button (orange background)
Select the component and choose the hover in trigger.
Choose the action: Interact with a componen t > Multi-state > Go to next state. You can add a delay, a duration, an animation type, an interval and activate the Loop mode.
Examples of transitions
You can make all kinds of transitions by controlling the states.
To make a fade-in effect, you need to change the opacity of your objects. If you want to make a fade-in, set the opacity of your object to 0% on the initial state and 100% on the linked state.
To make a sliding effect, you need to move your objects between the initial state and the linked state. You can also place them out of focus and combine it with opacity to accentuate the appearance effect..
To create a zoom effect (for example for your interactive maps), you need to enlarge the object in the linked state.
💡 If you want to create multiple zoom zones, you need to create a linked report for each zone. Then place an Interactive Zone component and create the link to the correct state.