Motion — Transitions
themes specs/themes/motion/transitions.kmd
Transition pattern catalog for Koder UI — 7 canonical patterns (fade, scale, slide, container transform, shared axis, push/pop, cross-fade), per-state motion, and page-level transitions. Consumes duration + easing tokens from `easing-duration.kmd` and spring tokens from `physics.kmd`.
When this spec applies
Primary triggers
- Add a new transition pattern to any Koder surface
All triggers
- Implement a screen-to-screen transition
- Animate a state change (hover, focus, press, drag)
- Pick a transition for a modal, drawer, or sheet
Specification body
Spec — Motion: Transitions
Facet Visual do Koder Design. Material parity: https://m3.material.io/styles/motion/transitions/transition-patterns.
R1 — Transition pattern catalog
| Pattern | Use | Tokens |
|---|---|---|
| Fade | Disappear/appear with no spatial implication | duration: fast/medium, easing: standard |
| Scale | Element zooming into view (modal, FAB expanding) | medium, decelerate |
| Slide | Drawer, bottom sheet, page transition | medium, decelerate (in), accelerate (out) |
| Container transform | Card → detail page (shared element) | slow, emphasize |
| Shared axis | Stepwise nav (onboarding, wizard) | medium, standard |
| Push/Pop | Stack-based nav (mobile back) | medium, decelerate |
| Cross-fade | Tab switch within same context | fast, standard |
Tokens reference motion/easing-duration.kmd R1-R2. Gestural variants
(drag-to-dismiss, swipe-back) MUST use spring tokens from
motion/physics.kmd R4.1.
R2 — Per-state motion
State transitions per interaction/states.kmd:
| State change | Pattern | Duration |
|---|---|---|
| Hover (enter) | Color/elevation tween | fast (100ms) |
| Hover (exit) | Color/elevation tween reverse | fast |
| Focus | Focus ring fade-in | instant (50ms) |
| Press | Scale 0.97 (touch) or color flash | fast in, medium out |
| Drag start | Lift (elevation +2) | medium |
| Drag end | Settle (elevation -2) | medium |
| Selection | Background tint fade | fast |
| Disabled | Opacity fade to 0.38 | medium |
R3 — Page-level transitions
| From | To | Pattern |
|---|---|---|
| Same surface (tab switch) | Cross-fade or shared axis (horizontal) | fast |
| Push detail (list-detail) | Slide left/push | medium, decelerate |
| Pop detail (back) | Slide right/pop | medium, decelerate |
| Modal open | Fade + scale 0.95→1.0 | medium, decelerate |
| Modal close | Reverse | fast, accelerate |
| Drawer slide | Slide from edge | medium, decelerate |
R4 — Pattern decision tree
What is changing on screen?
├── Single element appearing/disappearing
│ ├── No spatial change → Fade
│ ├── Growing into place → Scale (decelerate)
│ └── From a parent element → Container transform (shared element)
├── Stack of screens (nav)
│ ├── Pushing forward → Push (slide left)
│ ├── Popping back → Pop (slide right)
│ └── Stepwise wizard → Shared axis (horizontal)
├── Coordinated set of changes → Container transform / emphasize
└── Switching tabs in place → Cross-fade
Cross-link
motion.kmd— index over all Motion sub-specsmotion/physics.kmd— spring tokens, reduced-motion contractmotion/easing-duration.kmd— duration + easing tokensinteraction/states.kmd— state-level motion detailsnavigation/back-behavior.kmd— Pop/back navigation contract
References
specs/themes/motion.kmdspecs/themes/motion/physics.kmdspecs/themes/motion/easing-duration.kmdspecs/interaction/states.kmdspecs/navigation/back-behavior.kmd