Animations that respect your users

Motion is one of the easiest ways to make an interface feel polished — and one of the easiest ways to make it feel broken. Done well, it tells you where things came from and where they’re going. Done carelessly, it just gets in the way of people trying to do their job.

After years of adding (and removing) animation from products, I’ve ended up with a short list of principles I keep coming back to.

Animate to explain, not to decorate

The best animations answer a question the user was already asking. Where did that panel come from? What just changed? Did my click do anything? When motion is tied to a real state change, it reads as feedback. When it’s sprinkled on for delight, it reads as latency.

Before I animate anything, I ask: what is this movement helping someone understand? If I can’t answer, I cut it.

Respect prefers-reduced-motion

This one isn’t optional. A non-trivial number of people get motion sickness or vestibular discomfort from large transitions. Honoring their setting takes one media query.

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

I’ll usually go further than the blanket reset and design a genuinely calmer variant — fades instead of slides, no parallax — but the global guard is the floor, not the ceiling.

Keep it fast, and keep it cheap

Most interface motion should land between 150 and 300 milliseconds. Long enough to be perceived, short enough that nobody’s waiting on it. And it should stay on the compositor: animate transform and opacity, leave width, height, and top alone unless you enjoy debugging jank.

element.animate(
  [
    { opacity: 0, transform: 'translateY(8px)' },
    { opacity: 1, transform: 'translateY(0)' },
  ],
  { duration: 200, easing: 'ease-out' },
)

When in doubt, do less

The interfaces I admire most are remarkably restrained with motion. A little goes a very long way, and the ceiling on “too much” is lower than most of us want to admit. If I’m unsure whether an animation is earning its place, that uncertainty is usually my answer.