Motion principles
Motion works best when it tells the user where something came from and where it went. Start screens use TileSequence to coordinate a grid; a detail surface can use Transition. Panorama moves headings and panels along a shared horizontal position.
Back retraces the journey
Navigation establishes a spatial relationship. Returning should restore that relationship by retracing the motion that brought the user here.
If home tiles depart through the left edge, they return through that same edge. If an app turns into view around a hinge, Back turns it out around that same hinge. Mirroring the motion to the other side implies a different journey.
For a completed transition, reverse the path, transform endpoints, origin, stagger order and easing over the same duration. The last tile to leave is the first to return. Reverse the full sequence too: the app leaves before home returns. Use direction="forward" when moving onward and direction="backward" when returning through history in Transition and TileSequence.
For an interrupted transition, reverse from the currently displayed frame without a jump or a replayed delay. Keep the final animation frame until the destination state is committed; never expose the resting surface between screens. Restore focus to the source control when it still exists.
Reduced motion may remove the travel, but must preserve navigation order, completion and focus. Ambient tile flips and loading indicators are independent of this navigation rule.
Choose the right owner
| Component | Owns | Application still owns |
|---|---|---|
| Transition | Presence of one surface; enter/exit completion | Route changes and destination focus |
| Stagger | Cascading entrance; immediate hiding | Exit coordination |
| TileSequence | Grid wrappers and shared-perspective tile turns | Selected item and destination |
| Panorama | Gesture intent and spatial tab movement | Accepted selection and application data |
turnstile rotates around a leading edge, slide translates horizontally, continuum combines translation and scale, and fade changes opacity. Continuum is not shared-element morphing. These are web interpretations rather than frame-exact reproductions of a historical OS.
Coordinate completion, not timers
Keep a departing Transition mounted and set show={false}. It becomes inert and hidden from assistive technology immediately; children unmount after exit. Change application screens in onExited, then focus a meaningful heading or control on the destination. A fixed timeout drifts when duration, reduced motion or interruption changes.
Initial show={true} renders an already-entered surface and does not call onEntered. Completion callbacks describe a state change, not initial mounting. Reversal starts from the displayed frame, and obsolete runs cannot deliver stale completion callbacks.
Respect the environment
Transition and TileSequence settle immediately when duration is zero, reduced motion is requested, or supported animation APIs are unavailable. A runtime reduced-motion change also settles an active run. LiveTile pauses cycling under reduced motion and while backgrounded, hovered or focused; users can still advance it manually. Progress indicators retain static readable state.
Motion primitives do not move focus for you. Restore focus to a surviving source control when returning, and avoid placing focus into a subtree that is exiting. See composition for native interaction boundaries.