← Go Back

Motion Design

What is Motion Design?

Motion design is the practice of using animation and transition in interfaces to support user experience: to give feedback, show relationships, indicate state, and guide attention. Done well, it makes the product feel responsive and understandable without distracting from the task.

Use it when: you’re defining how the UI responds to user actions or system changes (transitions, loading, feedback) and want it to feel clear and consistent, with accessibility respected.

Copy/paste template

  • Purpose: [feedback, orientation, state change, or focus]
  • Trigger: [user action or system event]
  • Duration: [e.g. 200–300 ms for feedback, 300–500 ms for transitions]
  • Easing: [e.g. ease-out for enter, ease-in for exit]
  • Reduced motion: [what happens when prefers-reduced-motion: reduce]

Why Motion Design matters

  • Clarifies what’s happening (e.g. "saved", "loading", "this opened from there").
  • Keeps users oriented during navigation or layout changes.
  • Makes the product feel responsive and coherent when timing and style are consistent.
  • Can support accessibility when used for feedback and focus, and when reduced motion is respected.
  • Aligns with microinteractions and interaction patterns so behaviour is predictable.

What good motion design includes

Checklist

  • [ ] Purposeful: each animation supports feedback, orientation, or state (not decoration only).
  • [ ] Short and consistent: e.g. 200–500 ms for most UI; same easing and timing across similar cases.
  • [ ] Performant: prefer transform and opacity; avoid layout thrashing; test on low-end devices.
  • [ ] Reduced motion: respect prefers-reduced-motion; provide static or minimal-motion alternatives so essential info doesn’t rely on motion alone.
  • [ ] Documented: timing and easing in your design system so teams stay consistent.

Common formats

  • Feedback: button state, success/error, loading (spinner, skeleton, progress).
  • Transitions: page or panel changes, modals, expand/collapse (with clear start and end).
  • Orientation: indicating where content came from or how it’s related (use sparingly to avoid distraction).

Examples

Example (the realistic one)

A team defines motion standards: feedback animations 200–300 ms, ease-out; panel transitions 300 ms, ease-in-out. They use CSS for most cases (transition, transform, opacity) and ensure reduced-motion users get instant state changes and no parallax. Motion is documented in the design system so new components use the same durations and easing. They avoid motion for critical information only (e.g. errors still show as text and icon without relying on animation).

Common pitfalls

  • Motion for its own sake: animation that doesn’t help understanding or feedback. → Do this instead: tie every animation to a purpose; remove or shorten if it doesn’t add value.
  • Too long or too much: slow or repeated motion that distracts or annoys. → Do this instead: keep durations short (200–500 ms for most UI); avoid auto-playing loops for decorative motion.
  • Ignoring reduced motion: users who need less motion still get full animation. → Do this instead: use prefers-reduced-motion: reduce and provide instant or minimal-motion alternatives; don’t put critical info only in motion.
  • Performance: heavy or janky animation on low-end or mobile. → Do this instead: use transform/opacity; test on real devices; simplify or disable non-essential motion when needed.
  • Motion design vs microinteractions: Motion design is the broader practice; microinteractions are the small, task-focused moments (e.g. button feedback, like animation). Microinteractions often use motion design principles.
  • Motion design vs animation (generic): Motion design in UX is purposeful and tied to feedback, orientation, or state; generic animation can be purely decorative or narrative.
  • Motion design vs interaction patterns: Interaction patterns define what happens (e.g. "button click → save"); motion design defines how it looks and feels (e.g. duration, easing, reduced-motion fallback).

Next step

If you’re defining feedback and transitions, align with microinteractions and interaction patterns. Document timing and easing in your design system and always plan for accessibility (reduced motion, focus, no motion-only information).

Related Terms