Motion Design Principles for the Web

Motion is the secret ingredient that transforms good interfaces into great ones. But motion must be purposeful — gratuitous animation harms more than it helps.

The Three Rules

Motion should inform. Every animation should communicate something: a state change, a spatial relationship, or a feedback signal.

Motion should feel natural. Use easing curves that mirror real-world physics. Linear animations feel robotic.

Motion should be fast. Most UI animations should be 200-400ms. Anything longer feels sluggish.

Performance First

We use Framer Motion for orchestrated animations and CSS transitions for simple state changes. The key is knowing when to reach for each tool.

Accessibility

Always respect prefers-reduced-motion. Some users experience motion sickness or have vestibular disorders. Provide a graceful fallback that still communicates the information without the movement.

Tools We Love

Framer Motion for React-based animation

CSS transitions for lightweight interactions

Lottie for complex illustrative animations