Transitions

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

Objects

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.

Change 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

Animate transitions

By default if you create a new independent state, your transition will be raw. You can customize the transition by creating a linked state. In which case you put all the objects in the original state but you choose how they will be displayed, moved and behave in the linked state.

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
  • Properties
  • Actions

You can restore the original characteristics at any time from the  Objects window by clicking on the link icon.

link_between_states.png

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

Fade

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.

opacity.pngConfigure opacity in the toolbar 

Display effect of a home screen

Slide

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.

objects_position_out_of_the_screen.pngPlace objects out of the screen

Slide effect

Zoom

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_bigger.pngMake the map larger in the linked state

Zoom effect on the map

Crop

You can also use the states to animate your masks (on your images and groups). This is what made it possible to achieve this nice fan effect on the Louvrissime application

crop_image.pngResize the width of the mask on linked state

Menu effect using the mask

Still need help? Contact Us Contact Us