Spatial & directional motion
Where an element comes from matters as much as where it goes
## Transform-origin: the anchor point
The default `center center` is correct for modals. Wrong for almost everything else.
}
/>
## Directional tab indicators
Motion's `layoutId` makes this straightforward:
}
/>
## Continuity: shared elements across states
When an element exists in both "before" and "after," morph it in place. A card's image expands to fill the detail hero.
## Emerge from trigger
Overlays animate _from the element that opened them_.
## Scale starting values
`scale: 0` looks cartoonish. `scale: 0.99` is imperceptible. Sweet spot: **0.85 to 0.95**.
- **Modals**: `scale: 0.95`
- **Popovers**: `scale: 0.9`
- **Tooltips**: `scale: 0.85`
- **Buttons (press)**: `scale: 0.97`
## Direction and user flow
- **Forward** (drilling deeper): enters from right, exits left.
- **Backward** (going up): enters from left, exits right.
- **Vertical lists**: expanded panels push down, collapsed pull up.
- **Mobile sheets**: enter from bottom, exit downward.
}
/>
## CSS entry animations with @starting-style
For removal via `display: none`, use `transition-behavior: allow-discrete`:
Ships in Chromium and Safari. Firefox is on track.