Motion Design

Add purposeful animation and micro-interactions that enhance UX without compromising performance.

Prerequisites

• Read any design-context files for animation preferences, timing tokens, or easing curves.
• If a design system exists, use its transition tokens.
• Always respect prefers-reduced-motion.

Step 1: Animation Principles for UI

The Three Rules

1. Every animation must have a purpose: Guide attention, provide feedback, show relationships, or convey state change.
2. Faster is almost always better: UI animations should be 100-500ms.
3. Animate what changes: Only animate properties that are actually changing.