Web Motion Guidelines

Design and implement web animations that feel natural and purposeful

Timing and Duration

Duration Guidelines

Rules:

• UI animations should stay under 300ms
• Larger elements animate slower than smaller ones
• Exit animations can be ~20% faster than entrance
• Match duration to distance - longer travel = longer duration

The Frequency

Determine how often users will see the animation:

• 100+ times/day → No animation (or drastically reduced)
• Occasional use → Standard animation
• Rare/first-time → Can be more special

Example: Raycast never animates because users open it hundreds of times a day.

When to Animate

Do animate:

• Enter/exit transitions for spatial consistency
• State changes that benefit from visual continuity
• Responses to user actions (feedback)
• Rarely-used interactions where delight adds value

Don't animate:

• Keyboard-initiated actions
• Hover effects on frequently-used elements
• Anything users interact with 100+ times daily
• When speed matters more than smoothness

Performance

Prefer animating transform and opacity. These skip layout and paint stages, running entirely on the GPU.

Avoid animating:

• padding, margin, height, width (trigger layout)
• blur filters above 20px (expensive, especially Safari)
• CSS variables in deep component trees

Optimization Techniques

/* Force GPU acceleration */
.animated-element {
  will-change: transform;
}

Practical Tips

Quick reference for common scenarios. See PRACTICAL-TIPS.md for detailed implementations.

Easing Decision Flowchart

Is the element entering or exiting the viewport? ├── Yes → ease-out └── No ├── Is it moving/morphing on screen? │ └── Yes → ease-in-out └── Is it a hover change? ├── Yes → ease └── Is it constant motion? ├── Yes → linear └── Default → ease-out