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.