# Transitions

## What are transitions for?

Transitions help the user move through the pages in a flow in a more smooth way. They give the content and/or title an animation when a new page is reached.

## Types of transitions available:

* Rise and Fade
* Rise and Fade In
* Rise and Fade Delay

## How to add transitions to a flow

Transitions can be added to titles and to the content of a page. They can be global (across the entire flow) or on specific pages.

### Step 1:

* Select the type of animation.

### Step 2:

* If you want the same transition for all pages, select the globe. Otherwise, don't click on the globe icon and add different types of transitions on your pages.

### Step 3:

* Give the transition a delay time, this will make the pages with the transition go to the following page after the chosen time.

## Dos and Don't when applying transitions&#x20;

1. The most important thing to have in mind when using transitions is that styles for the content that will transition should target the elements by their in-page key. Check how to do this [here](https://trysavvy.gitbook.io/savvy/deprecated/targeting-certain-pages-and-components).
2. Don't target content by page or component key if you want to apply a transition to it. This may result in the content moving or the style of it changing before the transition ends. Instead, target the content with an in-page key.
