Skip to article body
A geometric composition of a sweeping arc and staggered bars implying motion, with one vermilion circle mid-travel.
A geometric composition of a sweeping arc and staggered bars implying motion, with one vermilion circle mid-travel.

Process · Field Notes

Motion Has Grammar

Animation on the web is not decoration. It is punctuation — and like punctuation, it has rules worth knowing.

By Omar Selim, Motion Lead 6 min read

Most interfaces move too much. Things slide, bounce, fade, and parallax for no reason anyone could defend, as if motion were a seasoning you add until the dish looks expensive. We have come to believe the opposite: motion is grammar. It tells the user how parts of a sentence relate — and a page full of exclamation marks says nothing at all.

Motion is punctuation

A transition is a way of saying "this came from that." A modal that grows from the button you tapped is a clause linked to its subject; a modal that simply appears is a non-sequitur. When motion describes a real relationship — origin, hierarchy, continuity — it reduces cognitive load. When it is merely pretty, it adds to it.

So we ask of every animation the same question we ask of a comma: what does this clarify? If the honest answer is "nothing, it just felt flat without it," the animation comes out.

Easing is tone of voice

Two transitions of identical duration can feel completely different depending on their easing curve. A sharp ease-out is confident and quick; a long, soft ease is calm and luxurious; a linear move feels mechanical, like a machine, not a hand. Easing is where an interface gets its manners. We tune curves the way a writer tunes a sentence — out loud, repeatedly, until the rhythm is right.

Our rough rules

  • Enter quickly, leave slowly — arrivals should feel responsive, exits unhurried.
  • Animate transforms and opacity, almost never layout — jank is a broken promise.
  • Respect prefers-reduced-motion as a first-class state, not an afterthought.
  • If you notice the animation, it is probably too long.

The case for stillness

The most underrated move in motion design is no motion. Stillness gives the eye somewhere to rest and makes the few things that do move genuinely important. An interface that is calm by default and animates with restraint feels faster and more trustworthy than one in perpetual gentle motion, even when the measured load times are identical.

We treat motion like a budget. Spend it on the few moments that carry meaning — a state change, a confirmation, a hand-off between screens — and bank the rest. The result is an interface that feels alive without ever feeling busy.

Good motion, in the end, is felt rather than watched. It does its work below conscious attention, and then it gets out of the way.

More from the Journal

view all →