# Transitions

> Learn how to create smooth and dynamic transitions between the states of a screen or object in PandaSuite.

https://docs.pandasuite.com/essentials/interactions/transitions/

**Transitions help improve the smoothness and readability of the user experience by adding visual effects.**

## What is a transition?

A transition is an animation applied between two states. Transitions are only possible when using states, which are variations of the same component or screen. For example, if you have a button that changes color or a menu that appears, each version corresponds to a different state.

The transition animates the switch from one state to another.

## Where can you find states?

States are a feature available in several PandaSuite components and elements:

- **Screens**: you can create multiple states within a single screen, for example to manage different steps of an interface

- **The** [Pop-up](https://docs.pandasuite.com/essentials/components/pop-up/) **component**: you can create entry effects with different states of the same pop-up

- **The** [Multi-state](https://docs.pandasuite.com/essentials/components/multi-state/) **component**: allows you to group several custom states within the same container

- **Foregrounds / backgrounds**: these areas can also contain multiple states

## Add a transition

Once your states are defined, you can add a transition by modifying a property and creating an animation action.

- Add at least two states (initial and final) to a component or screen.

- In the final state, modify a property of the object: its size, position, opacity, mask, etc.

- Create an action (click, hover, swipe...) that triggers the state change.

- In the action options, enable the animation: you can define a duration (in milliseconds) and a type of animation (linear, ease-in, etc.).

## Transition examples

### Logo on welcome screen

Here is an example of a transition on a welcome screen – it adds dynamism and modernity as soon as the app launches.

[Video: Welcome screen transition: a blue diagonal band sweeps over the photo, then the Pandimmo logo and Start now button appear]

- Set up the initial state of your screen: insert the objects and design the layout.
- Open the **Screens** panel and click 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 triggers automatically, select the state and the trigger **On state display**.
  - If it is linked to user interaction, select the object and its event trigger.
- Choose the action: **Change screen state** > **Go to next state**. You can add a delay, a duration, an [animation type](https://docs.pandasuite.com/essentials/interactions/animations/), an interval, and enable loop mode.

### Animated button on hover

[Video: Animated button on hover: on the Trivia Disney home screen, Start playing turns from yellow to orange under the pointer]

- Insert a [Multi-state](https://docs.pandasuite.com/essentials/components/multi-state/) component
- Set up the initial state of your button (yellow background)
- Click the orange button to create a linked state.
- In this linked state, change the button color (orange background)
- Select the component and choose the trigger **Hover in**.
- Choose the action: **Act on component** > **Multi-state** > Go to next state. You can add a delay, a duration, an [animation type](https://docs.pandasuite.com/essentials/interactions/animations/), an interval, and enable loop mode.

## Types of transitions

You can create all kinds of transitions using states.

### Fade in-out

To create a fade-in effect, modify the opacity of your objects. For example, set the object’s opacity to 0% in the initial state and 100% in the linked state.

[Video: on a sky background, the Sunshine Travel logo, a text and the Get started button gradually fade in]

[Video: Create a Fade-In Effect for a Logo Animation](https://youtu.be/X0jAtA3h5Wk)

### Slide

To create a slide effect, move your objects between the initial and linked states. You can also place them offscreen and combine with opacity to enhance the appearance.

[Video: on the RIVIER welcome screen, leaf and feather drawings slide in from the edges around the title and button]

### Zoom

To create a zoom effect (for example on interactive maps), enlarge the object in the linked state.

> **Info**
>
> If you want to create several zoom zones, create one linked state per zone.
> Then, place an [Interactive Zone](https://docs.pandasuite.com/essentials/components/interactive-zone/)
> component and link it to the right state.

[Video: a click on one area of a map zooms in on its towns, then Retour zooms back out]

### Mask (crop)

To create masking effects such as a fan menu, change the mask size between your states.

[Video: in a fan menu of six painting strips, each click widens one strip to reveal the whole painting and its title]