Motion that respects the user

Animation should explain what changed and where to look. If a user can’t answer those two questions, the motion is noise.

Start with intent

• Use entry/exit motion to show hierarchy (primary first, secondary staggered).
• Keep durations short: 150–250ms for small UI, 300–450ms for overlays.

Accessibility matters

• Respect reduced-motion preferences; swap transitions for fades or instant states.
• Avoid parallax or large translations that can induce motion sickness.

Helpful defaults

• Easing: use ease-out for entrances, ease-in for exits, and ease-in-out for subtle loops.
• Limit bounces and overshoots; clarity beats flair.