Create animations on your objects or screens by creating transitions. You can control the duration, delay, opacity, movement and size of your objects, or add easing and spring animations.
What is a transition?
A transition is a passage between two states. By default, this transition is raw: it makes the objects of the first state (0% opacity) disappear when the second state is displayed. Nevertheless you can customize and animate your transition using the linked states and easing & spring animations.
Create a transition
If you want to create a transition for your entire screen (for example an animated home screen), create a new state for your screen.
If you want to create a transition for one or more objects, use the Multi-state component, insert the object(s) inside and create a new state.
Open the Actions window and choose a trigger: automatic display, automatic display, typing...
Choose a trigger and choose the action Go to selected state or Interact with a component > Pop-up/Multi-state > Go to selected state if your state is in a component. Your transition is created automatically.
You can set a delay and duration to your transition, and add
If you want to sequence the animation, you can create several linked states.
Create linked states
Select the state and click on the orange button.
A new state is created, under its name is the name of the original state.
Links between states
When you create a state B based on a state A, state A becomes the parent of state B. All objects are then linked between these two states. By default, any change on state A is automatically applied to state B. To create a transition, you need to make a change to your objects' characteristics in state B. There are three types of characteristics on your objects:
- Size & Position
You can restore the original characteristics at any time from the Objects window by clicking on the link icon.
Be careful: if you import a new object or cut the object, the links are broken and the object becomes completely independent. No transition will be possible on this object.
Main types of transitions
Create a fade in / out effect by changing the opacity of your objects. The opacity can be found in the toolbar. In the first state, choose an opacity of 0% for your object and restore it to 100% on the linked state.
Configure opacity in the toolbar
Display effect of a home screen
Create effects to move your objects. You can place objects out of your screen. Choose the path of movement. You can combine it with opacity to enhance the appearance of your objects.
Place objects out of the screen
The states also let you easily create a zoom effect. To do this, simply zoom the object in the linked report. This is perfect for your interactive map projects.
If you want to create multiple zoom areas, create a linked report by area from your initial state and place an interactive zone above each area that redirects to the correct state.
Make the map larger in the linked state
Zoom effect on the map
Resize the width of the mask on linked state
Menu effect using the mask