Motion That Means Something
Animation on the web is mostly decoration, and decoration is mostly noise. A field guide to motion that explains instead of distracts — and knows when to get out of the way.
Most animation on the web is a magician’s flourish: a movement designed to be admired rather than understood. The card flips, the section parallaxes, the number counts up dramatically toward a figure the reader could have simply read. It is impressive for exactly as long as it takes to become annoying, which on a site you visit twice is roughly the second visit.
I am not against motion. I have spent years building it. But I have come to believe that motion has one honest job — to explain change — and that almost everything else it gets used for is a misuse that the medium tolerates but the reader resents.
Animation is a sentence about cause and effect
When something appears, moves, or disappears on screen, the motion is making a claim about why. A panel that slides in from the right is saying “I came from over there, and that is where I will return.” A menu that grows out of the button you pressed is saying “I am a consequence of that press.” These are useful sentences. They turn an abrupt state change — which the brain reads as a small shock — into a continuous story the eye can follow.
The test for any animation is simple: does it answer a question the user was about to ask? Where did this come from? Where did that go? What just changed, and is it done changing? If the motion answers one of those, it is earning its frames. If it is just there to be seen, it is spending the user’s attention on the designer’s vanity.
The physics of trust
Good interface motion borrows from the physical world not because skeuomorphism is back but because the body already knows how real things move. Real objects have mass; they accelerate and decelerate; they do not start and stop at full speed like a stage light switching on. An ease-out — fast to start, gentle to settle — feels right because it is how a thing thrown comes to rest. Linear motion feels mechanical and slightly menacing for the same reason a robot’s walk does: nothing in nature moves at a constant velocity.
Duration matters as much as easing. Too fast and the motion fails to do its explanatory job — the user sees the end state but misses the journey that justified it. Too slow and you have built a toll booth, charging the user time for a transition they did not request. The sweet spot for most interface motion is shorter than designers think: long enough to be followed, short enough to never be waited on. When in doubt, make it faster.
The kindest motion is the motion you can turn off
There is a real population of people for whom motion is not delight but discomfort — vestibular disorders, migraine triggers, simple sensory overwhelm. The web gives us a clean way to respect them: prefers-reduced-motion. Honouring it is not an edge case to handle at the end. It is part of the definition of the work being finished.
In practice this means designing two versions of every transition from the start: the full motion, and the reduced one that still communicates the change — usually a quiet fade, or an instant cut with the spatial relationship preserved some other way. If your reduced-motion fallback is “nothing happens and the layout breaks,” you did not build an accessible animation. You built an animation and an apology.
Motion, done right, is invisible. The reader never thinks “nice transition.” They think the interface is responsive, legible, alive — and they could not tell you why. That not-knowing is the whole point. The flourish wants applause. The good animation wants to be forgotten.