---
title: "Screen transitions"
description: "Animate how screens appear and disappear as users move through a flow."
---

> **AI agents**: to search Adapty docs faster and with fewer tokens, install the Adapty skills: `npx adapty skills install --yes`

You can animate the transitions between screens — how one screen disappears and the new one appears. The available animations depend on the particular navigation action:

- [**Navigate to Screen**](onboarding-actions#navigate-to-screen): Open the [action settings](#customize-a-transition) and select from the [full range of animation types](#animation-types). Different steps can use different transitions.
- **Navigate Next**: Only the default push animation.
- **Navigate back**: Plays the transition navigation that was used when arriving at the current screen, but in reverse and with no delay. If there was no animation on arrival, there is no animation on return.
- **Close Flow**: No animation of its own. Your app is responsible for the transition between the flow and your native UI.

## Animation types

The **Animation** dropdown of the **Navigate to Screen** action has five options:

- **Push**: The new screen enters from one edge and pushes the current screen out the other.
- **Slide in**: The new screen slides and fades in over the current screen, which moves a short way in the same direction.
- **Slide out**: The current screen slides away and fades out, uncovering the new screen underneath.
- **Fade through**: The new screen fades in over the current screen.
- **None**: The new screen replaces the current one instantly.

## Customize a transition

You can only change the animation in a **Navigate to Screen** action.

1. Select the element that triggers a navigation action.
2. In the **Interactions** panel, click the navigation action.
3. If the action is **Navigate Next**, select **Navigate to Screen** from the **Action** dropdown. Then select the next screen as the **Destination**.
4. Select an animation from the **Animation** dropdown.
5. If the animation has **Direction**, **Easing**, or **Duration** settings, adjust them.
6. To keep the current screen visible before the animation starts, set a value in the **Delay** field. For example, use a delay to keep a [loading screen](builder-loaders-and-progress-bars#loaders) on for a few seconds. [Actions listed after the navigation](onboarding-actions#action-order) don't wait for the delay.
7. To see the transition on your own screens, [test the flow on a device](paywall-device-compatibility-preview#preview-on-devices).