Motion & Animation

What is it?

Motion and animation in design systems refers to the planned use of transitions, animations, and micro-interactions to communicate state changes, provide feedback, guide attention, and create a polished product feel. Motion has a formal language: duration, easing, delay, and direction — all of which affect how it's perceived.

Why it matters

Motion does real UX work: it helps users understand what changed (a sidebar sliding in), communicates state (a spinning loader), and connects spatial relationships (a modal expanding from a button). Without purposeful motion, transitions feel abrupt and state changes confusing. With too much motion, products feel distracting and exhausting.

Best Practices

• Duration tokens: 100ms (micro), 200ms (fast), 300ms (moderate), 500ms (slow). Most UI transitions belong in 100–300ms.
• Easing: ease-out for elements entering the screen, ease-in for elements leaving, ease-in-out for elements moving.
• Spring physics (Framer Motion, React Spring) for natural-feeling interactions — physics-based motion feels more alive.
• Purposeful motion only — every animation should communicate something. Decoration-only animations slow down the UI.
• Respect prefers-reduced-motion media query — always provide a no-animation alternative.
• Micro-animations for feedback: button press, toggle switch, checkbox check, like action.
• Loading animations: spinner for unknown duration, progress bar for known duration, skeleton for content loading.
• Route transitions: subtle and fast (< 300ms). Long page transitions feel slow, not polished.
• Avoid motion that doesn't enhance comprehension: parallax effects, excessive scroll animations, decorative bounces.
• Test animations on lower-powered devices — they run at lower frame rates and can feel broken.

Common Mistakes

• Animations with no purpose — pure decoration that adds cognitive load.
• Too long — transitions > 500ms feel sluggish and delay the user.
• Linear easing — mechanical and unnatural. Always use easing curves.
• Not respecting prefers-reduced-motion — causes vestibular disorders for some users.
• Animations that prevent interaction — users shouldn't have to wait for animations to complete.
• Inconsistent timing — one transition at 150ms, another at 300ms for the same type of interaction.
• Testing only on developer machines — smooth on a MacBook Pro, janky on a $200 Android.

Checklist

Research & Theory

Real-World Examples