Transitions

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.

States

State is a fundamental concept for your application. There are states at several levels: in screens, foreground and background, and in Pop-up and Multi-state components.

By default, each screen and object has only one state. To create a transition between these states, you must create one or more linked states.

Type of states

There are 2 types 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

When you create a linked state, the initial state becomes the parent of the linked state. All objects are linked between these two states and any modification made to the initial state is then applied to the linked state. On the other hand, any modification on the linked state does not go back to the initial state.

In concrete terms, there are three links that connect the objects:

Size & Position
Properties
Actions

You can edit and restore these links from the Objects window.

⚠️ 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.

Screen transition

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.

Object transition

If you want to animate only one or several objects, you can use the Multi-state component. It allows you to customize your UI elements and their transitions: buttons, checkbox, drop-down...

Here is an example of a transition on a hover button:

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.

Fade In-Out

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.

Slide

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..

Zoom

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.

Mask (crop)

To create your mask effects and especially the fan menu, you must change the size of the mask between your states.