Motion
Interaction timing, easing and reduced-motion guidance.
Motion principles
- Purposeful: communicate state, hierarchy or continuity.
- Restrained: no perpetual motion in task-focused views unless it communicates live activity.
- Responsive: interactions should feel immediate.
- Performant: animate transform and opacity where possible; avoid layout-thrashing effects.
- Inclusive: honor
prefers-reduced-motion.
Timing
- Micro feedback: 100–160ms
- Standard transitions: 180–260ms
- Emphasis / panel transitions: 280–420ms
- Ambient motion: slow, low-contrast and nonessential
Use ease-out for entrances and ease-in for exits. Avoid elastic or bouncing motion in serious operational workflows. GSAP may be used for expressive marketing moments; core functionality must not depend on animation.
Interaction states
Every interactive component must define default, hover, focus-visible, active/pressed, disabled, loading and error states where relevant. Touch targets should generally be at least 44×44 CSS pixels.