What Are Page Transitions?

A page transition is the animation that plays while the app moves from one page to another. A well-chosen transition reinforces the spatial model of your app — slide-left implies moving deeper into a hierarchy; slide-right implies going back; fade is neutral and works in any direction. Poorly chosen transitions (or too-slow ones) make an app feel sluggish, so UnifyApps lets you tune both the type and duration.

Transitions are configured at two levels: a single app-wide default that applies to every navigation, and per-Navigate action overrides that let specific flows use a different animation. The override always wins when set.

Note: The destination page begins loading immediately when navigation is triggered. The transition animation plays over the top of the loading state and does not add real latency to navigation. Data-heavy pages may finish loading before the animation completes, or vice versa.

Transition Types

The following transition types are available across both web and mobile platforms. Not all feel equally appropriate on every platform — see the platform guidance below.

Warning: Use flip and zoom-in sparingly. Applying them to every navigation in your app quickly feels gimmicky and can cause motion sickness in users sensitive to vestibular effects. Reserve them for singular moments.

Configuring the App-Wide Default

The app-wide default transition applies to every Navigate action that does not have an explicit override. Set it once and it propagates to all navigations automatically.

1. Open App Settings: In the top bar of the builder, click Settings (the gear icon), then select Development.

2. Navigate to the Navigation section: In the Settings panel, find the Navigation section. It contains both content (menu items) and behaviour settings.

3. Set Default Transition: Find the Default Transition dropdown. Choose from the nine transition types listed above. The change applies immediately — use Preview mode to verify the feel before publishing.

4. Optionally adjust duration and easing: The Transition Duration field (milliseconds) and Easing dropdown sit immediately below the type selector. The defaults (300 ms, ease-in-out) work well for most apps. Tighten duration to 200 ms for snappy desktop apps.

Per-Navigate Action Override

Any individual Navigate action — Go to Page, Navigate Back, or Go to URL — can override the app-wide default with a different transition. This lets you use slide-left as your default for drill-down navigation while using slide-up specifically for a sheet-style settings page.

To set an override:

1. Select the component that triggers the navigation (e.g. a Button).

2. Open its Events panel and click the Navigate action.

3. In the action configuration panel, expand the Transition section.

4. Toggle Override default transition to on.

5. Choose the transition, transitionDuration, and transitionEasing values for this specific action.

Transition Properties Reference

The following properties are available both in the App Settings default and as per-Navigate overrides.

Mobile vs Web Considerations

Transitions that feel native differ significantly between mobile and web. UnifyApps uses the same transition engine on both platforms, so the choice of transition type carries more weight on mobile where users compare the feel against native OS behaviour.

Tip: UnifyApps automatically honours the prefers-reduced-motion media query on web. When a user has enabled "reduce motion" in their OS accessibility settings, all transitions are downgraded to none regardless of your configuration. No extra work is needed on your part.

Conditional Transitions

You can bind the transition property on a Navigate action to an expression, making the animation depend on runtime state. The most common use case is matching the transition direction to the user's navigation direction — forward vs back.

📄 Example — Direction-aware transition

In a multi-step wizard, bind the transition property of your Navigate actions to:

{{ nav.direction === "forward" ? "slide-left" : "slide-right" }}

The nav.direction binding reflects the direction of the most recent navigation event. When the user clicks Next, the transition slides left (deeper). When they click Back, it slides right (shallower). The result is a spatial metaphor that mirrors native mobile app behaviour.

Other useful conditional patterns:

• Use fade when navigating to a top-level page and slide-left for detail pages: {{ page.isDetail ? "slide-left" : "fade" }}

• Use none for system-initiated navigations (redirects, post-save auto-navigation) and slide-left for user-initiated ones.

• Use slide-up when a modal query param is present, slide-down when dismissing.

Disabling Transitions

Set transition to none to make navigation instant — the new page appears with no animation. This is appropriate in several situations:

• Data-heavy dashboards where page content changes significantly and the animation does not add clarity.

• Programmatic redirects (e.g. authentication guards that bounce unauthenticated users to login) where you want the redirect to feel seamless rather than animated.

• High-frequency navigation — if users navigate between pages many times per session, transitions accumulate time and can feel sluggish even at 300 ms.

• Initial page load — the very first navigation to any page always uses none regardless of your setting, because there is no "previous page" to animate out of.

Note: Setting transition to none skips the transition system entirely. Setting transitionDuration to 0 runs the transition engine with a zero-length animation — the visual result is the same (instant swap) but incurs slightly more overhead. Prefer none when you genuinely want no animation.

Frequently Asked Questions

Can I control the transition when the user presses the browser back button?

The browser back button triggers a popstate navigation, which UnifyApps intercepts and routes through its navigation system. The app-wide default transition applies. If you want a different transition for back-navigations specifically, use a custom Back button component wired to a Navigate Back action and set an override on that action — for example, slide-right. Native browser back cannot be individually overridden at the action level because it bypasses the action system.

Do transitions play when switching tabs in a Tab Navigator?

Tab switches use the app-wide default transition unless you override it on the tab navigator's navigation items. For tab switches, fade or none is generally preferred because slide transitions imply a directional hierarchy that tabs do not have. Set the Tab Transition property in App Settings → Navigation → Navigator Type → Tab Navigator to control this independently of page-to-page transitions.

Transitions are not playing in the builder — is something wrong?

The builder canvas runs in a sandboxed iframe where some animations may be suppressed or simplified to keep editing performance high. Transitions always play correctly in Preview mode (click the play icon in the top bar) and in the published app. If a transition is missing in preview, check that the transition type is not none and that the duration is above 50 ms.