Motion Design That Doesn't Annoy

Motion is feedback. It tells users that something happened, something is happening, or something will happen.

Motion is also noise. Bad animation makes products feel childish, slow, or irritating.

The difference is restraint.

The Purpose of Motion

Every animation should answer one question: What did the user just do?

Click a button. It visually responds. Submit a form. The page transitions. Open a dropdown. The menu appears.

"Motion is the product saying 'I heard you.' Without it, interfaces feel dead. With too much, they feel hyperactive."

Pasquale D'Silva, designer and animator, wrote in his seminal essay The Cinemagraph and the Photograph: "Animation is the language of software. It's how interfaces communicate."

The question is whether your animation is saying something useful or just making noise.

What Bad Motion Looks Like

Bounce Effects

Elements that spring into place feel playful. Playful isn't professional.

Bounce is the design equivalent of an exclamation point. One is fine. Twenty is a headache.

Stripe deliberately avoids bounce. Linear deliberately avoids bounce. Vercel deliberately avoids bounce. The pattern is clear: professional products use restrained easing.

Slow Fades

Animations that take too long feel like work. The user is waiting for your product to finish performing.

Google's Material Design guidelines recommend durations between 150ms and 300ms for most transitions. Longer than that tests patience.

Confetti and Celebration

Celebration animations assume the user is happy. They might be. They might also be in a hurry.

Confetti on form submission feels presumptuous. Checkmarks feel respectful.

"Default to calm. Celebration is earned, not assumed."

Parallax Everything

Parallax scrolling was impressive in 2015. Now it's expected, then ignored, then annoying when it breaks scroll behavior.

Use parallax sparingly, if at all. Most users don't consciously notice it. Many find it disorienting.

What Good Motion Looks Like

Fast

150-300ms is the sweet spot. Long enough to perceive, short enough not to wait.

Linear's interface is famously snappy. Every transition happens at the edge of perception. The result is an interface that feels responsive without feeling rushed.

Eased

Use ease-out for elements entering. Use ease-in for elements leaving. The difference is subtle but correct.

Ease-out follows physics: things slow down as they arrive. Ease-in follows physics: things accelerate as they leave.

cubic-bezier(0.25, 0.1, 0.25, 1) is a good default for most transitions.

Purposeful

Every animation communicates something. If it doesn't communicate, remove it.

Arc browser's tab animations serve a purpose: they show you where tabs go when closed and where they came from when restored. The animation teaches the interface.

Consistent

Similar actions get similar animations. Buttons always respond the same way. Dropdowns always open the same way.

Figma maintains animation consistency rigorously. Every dialog opens with the same timing. Every tooltip appears with the same delay. The consistency becomes invisible—which is the point.

The Tool Aesthetic

Good motion feels like a well-made tool.

Think of a high-quality drawer closing. Smooth. Damped. Satisfying. Not bouncy. Not dramatic.

"Interfaces should feel the same way. Things slide into place. Inputs respond immediately. Nothing draws attention to itself."

Raycast's command palette is a study in tool-like motion. It appears fast. Items highlight smoothly. Nothing bounces. The motion serves the task.

Motion as Brand

Motion is a brand decision.

Fast, snappy motion feels technical and efficient. Slow, smooth motion feels luxurious and considered.

Match the motion to the personality.

Linear uses precision timing because their brand is about developer focus. Every millisecond of animation is calibrated.

Apple uses deliberate, slower transitions because their brand is about considered experience. The transitions themselves are part of the product feel.

Vox Animus uses subtle, smooth motion. No bounce. No celebration. Things appear and disappear without fanfare. This matches the calm, exacting personality.

The Removal Test

Look at every animation in your product. For each one, ask: What would happen if I removed this?

If the answer is "nothing," remove it. If the answer is "the user wouldn't know something happened," keep it.

"Motion that survives the removal test is motion that belongs."

Most animations fail this test. They're decorative, not communicative. Remove them and your product feels faster and more focused.

---

Ready to define your motion language? Try the Vox Animus demo to build your visual direction.