Motion — Transitions
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`.
Spec — Motion: Transitions
Facet *isual*do Koder Design. Material parity: https://m3.material.io/styles/motion/transitions/transition-patterns.
R1 — Transition pattern catalog
| Pattern | Use | Tokens |
|---|---|---|
| *ade* | Disappear/appear with no spatial implication | duration: fast/medium, easing: standard |
| *cale* | Element zooming into view (modal, FAB expanding) | medium, decelerate |
| *lide* | Drawer, bottom sheet, page transition | medium, decelerate (in), accelerate (out) |
| *ontainer transform* | Card → detail page (shared element) | slow, emphasize |
| *hared axis* | Stepwise nav (onboarding, wizard) | medium, standard |
| *ush/Pop* | Stack-based nav (mobile back) | medium, decelerate |
| *ross-fade* | Tab switch within same context | fast, standard |
Tokens reference motion/easing-duration.kmd R1-R2. Gestural variants (dragtodismiss, 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-fadeCross-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