Motion state design
Designs motion as explicit interaction behavior that remains coherent when users reverse, repeat or interrupt an action.
motion-design-states
See how it helpsWhen is it useful?
Use it when animation feels inconsistent or rapid input leaves a component between visual and functional states.
What does it help you do?
- Defines shared timing and easing around a clear interaction purpose.
- Models hover, focus, press and loading-to-error transitions.
- Handles rapid retriggering, reversal and invisible hit targets.
Try asking this
Design a drawer that reverses smoothly when rapidly opened and closed. Click open and close repeatedly before completion. The drawer should reverse from its current position and never leave an invisible layer intercepting input.
Detailed documentation
Read the skill’s original instructions, examples and checks in their authored language.
Show less
Motion Design & Interaction States
Treat motion as functional communication, not decoration. Every animation must answer at least one user question: Where did this come from? What just changed? Is my action in progress? Where should I look next?
Motion Purpose & Token System
Define a coherent motion scale so transitions feel authored by a single hand across the product:
| Interaction Tier | Typical Duration | Recommended Easing | Distance / Scale Bound | Primary Purpose |
|---|---|---|---|---|
| Micro-feedback (hover, press, focus ring, toggle) | 100ms–160ms |
cubic-bezier(0.2, 0, 0, 1) (ease-out) |
scale(0.97–1.02), translateY(-1px to -2px) |
Immediate tactile acknowledgment |
| Component state change (dropdown, accordion, tab indicator, toast) | 180ms–260ms |
Enter: ease-out cubic-bezier(0.16, 1, 0.3, 1); Exit: ease-in cubic-bezier(0.4, 0, 1, 1) |
8px–24px offset or FLIP layout delta |
Spatial relationship & hierarchy |
| Surface / View transition (drawer, modal, sheet, route crossfade) | 260ms–380ms |
cubic-bezier(0.22, 1, 0.36, 1) or critically damped spring ($\zeta \approx 1$) |
Panel width / bounded viewport delta | Orientation across navigation |
| Narrative / Product showcase (staged hero scene, multi-step walkthrough) | 450ms–900ms per beat |
Custom choreographed curves + staggered 40ms–80ms offsets |
Scene-specific | Guided attention & storytelling |
Asymmetric Enter vs. Exit: Elements entering the user's attention decelerate into rest (ease-out, slightly longer duration); elements dismissing or exiting accelerate out of the way (ease-in, 20–30% shorter duration) so the interface never feels sluggish.
Explicit State & Interruption Matrix
Before writing animation code, specify every state and how mid-flight interruptions behave:
idle$\leftrightarrow$hover/focus-visible$\leftrightarrow$pressed:- Never rely on hover alone to reveal critical actions; ensure keyboard
focus-visibleand touch states expose the same affordances.
- Never rely on hover alone to reveal critical actions; ensure keyboard
- Mid-flight reversal & rapid re-triggering:
- If the user closes a menu or toggles a switch 80ms into a 250ms open animation, reverse smoothly from the current interpolated velocity and position (as CSS transitions, retargeted springs, and GSAP
.reverse()do naturally) rather than snapping to100%before playing the exit.
- If the user closes a menu or toggles a switch 80ms into a 250ms open animation, reverse smoothly from the current interpolated velocity and position (as CSS transitions, retargeted springs, and GSAP
- Pointer-events & hit-target hygiene:
- Disable
pointer-events: noneon exiting elements immediately when dismissal begins so invisible or fading overlays never trap clicks or focus. - Keep the clickable hit box stable during hover scale/transform effects to prevent hover-jitter loops at element edges.
- Disable
- Loading $\rightarrow$ Content $\rightarrow$ Error continuity:
- Reserve final layout dimensions before data arrives (skeletons or aspect-ratio containers) and crossfade or FLIP into the loaded state so content never jumps under the user's pointer.
Included files 1
SKILL.md