What Are Page Transitions?
A page transition is the animation that plays when your app opens a page. Transitions apply only to mobile apps running natively on iOS and Android. In web apps the transition settings are hidden, and pages open without a transition.
You set transitions at two levels:
Per page: each page has a Transition Behavior in Page Settings. It's used whenever the app navigates to that page.
Per Go to Page action: a Go to Page action can turn on Override Transition and pick a different transition for that navigation.
There's no app-wide default transition, and no duration or easing setting. Each transition uses the native animation of the device.
Transition Options
The picker groups its eight options into Standard, Modal and Expressive.
Group | Option | Motion |
|---|---|---|
Standard | Platform Default | Native default for each platform: the device's own push animation. This is the default for every page. |
Standard | Slide | Slides in from the right edge. The current screen is pushed left as the new screen enters. |
Standard | Fade | Cross-dissolve between screens. |
Standard | None | Instant switch, no animation. |
Modal | Adaptive sheet | Card-style on iOS, sheet on Android. Renders as a draggable card on iOS and a bottom sheet on Android. |
Modal | Full Screen | Covers the entire screen, rising from the bottom edge. |
Expressive | Fade from bottom | The new page rises slightly from the bottom as it fades in. |
Expressive | Overlay | The new page fades in as a modal over the current one. It has its own page background, so the page below is hidden, not seen through. |
Setting a Page's Transition
Open the mobile app in the builder. In the Navigator panel, click the page to open its Page Settings.
Find Transition Behavior.
Pick an option from the list. The default is Platform Default.
The page now uses this transition each time the app navigates to it.
Overriding the Transition in a Go to Page Action
Use an override when one flow should open a page differently, for example opening a details page as an Adaptive sheet from one button only.
Select the block that triggers the navigation, such as a Button.
In the properties panel, go to the block's Interactions section and select the Go to Page action under its event (or use Add Interaction to add one).
Turn on Override Transition.
Pick a transition from the list.
For that navigation, the override replaces the destination page's own Transition Behavior. Other actions that open the same page still use the page's setting.
Note: Only the Go to Page action has a transition override. Navigate Back and Go to URL have no transition setting.
Choosing a Transition
Use Platform Default or Slide for standard drill-down navigation, such as opening a detail page from a list.
Use Adaptive sheet or Full Screen for pages that act like modals, such as a form or a filter screen.
Use None when the switch should be instant, for example after a redirect.