Design Openbook

Screen Transition Types

What are the types of screen transitions in an app and when should you use each? Use a push transition to go deeper, a modal for a short side task, a tab switch for same-level screens, a shared element transition to expand a card, and a crossfade as a gentle fallback.

A transition tells the user where the new screen came from. Choose the one that matches how the screens relate.

Terms and previews

Tap a preview to pause it; tap again to play.

  1. Push transition

    Slides in from the side. For going one level deeper

  2. Modal presentation

    Rises from the bottom and covers the screen. For a short task you return from (composing, settings)

  3. Tab switch

    Swaps screens on the same level. A short fade is enough

  4. Shared element transition

    The tapped card grows into the detail screen

  5. Crossfade

    The old screen fades out as the new one fades in on top

How to use it

  • Going deeper is a push, a short trip is a modal, same-level moves are a tab switch. Do not mix these relationships.
  • When going back, leave in the opposite direction you came in. If it came in from the right, it leaves to the right.
  • Use card expansion only when the same thing is shown larger, like a photo or product. The effect is big and tiring if overused.

Prompts to copy

List to detail

Make the transition from the product list to the detail screen a Shared element transition.
- The image of the tapped card grows into the top image of the detail screen.
- Duration 350ms, ease-out.
- On close, it shrinks back to the original card position.
- If reduce motion is on, use a 200ms Crossfade instead.

Source posts: @uxwoodytips

All cards (27)