Building with motion: when animation helps and when it hurts

Animation is the easiest way to make an interface feel impressive, and the easiest way to make it feel annoying. The difference is almost always intent. Does this motion communicate something, or is it just performing?

What animation actually does

Good animation does one of three things: it communicates state (this button was pressed, this item was deleted), it guides spatial attention (look here next), or it communicates continuity (this element is the same one you were just looking at, it moved). If your animation doesn't do at least one of these things, cut it.

Duration is everything

Most beginner animation mistakes are duration mistakes. Too slow feels sluggish. Too fast feels cheap. For UI transitions, 200–350ms is almost always the right range. Easing matters equally — ease-out for elements entering (they decelerate into place), ease-in for elements leaving (they accelerate away). Never use linear for anything a human will look at.

The spring vs. tween decision

Tweens (duration-based curves) are precise and predictable. Springs are physically simulated and feel organic. Use tweens when you need control: crossfades, opacity changes, color transitions. Use springs when you're moving something through space: panels sliding in, elements scaling, position changes. Springs make spatial motion feel natural because that's how real objects move.

When to stop animating

If you find yourself adding animation because something looks bare without it, that's a signal the layout or hierarchy needs work, not motion. Animation is a seasoning, not a meal. The best-animated interfaces feel unremarkable until you turn them off — and then everything feels broken. That's the target.