Motion should mean something
Your eye notices movement before it notices anything else. Which makes animation the loudest tool on the page, and most sites are using it to say nothing.
Somewhere along the way, the web decided everything should move. Scroll down almost any portfolio site and the headlines fade up, images slide in from the left, numbers count from zero, and a blurry shape you can’t quite identify drifts behind the pricing table. None of it means anything. It’s motion as garnish.
We’d like to argue for something quieter.
Motion is a language, and like any language it can inform or it can babble. Your eye is wired to notice movement before it notices almost anything else. That’s old biology, the part of you that watched the grass for predators. So animation is never neutral. Every moving element on a page is raising its hand for attention whether you meant it to or not. Put six of them on screen at once and you haven’t made the page lively. You’ve made it loud.
The two jobs motion actually has
The first is feedback. You press a button and it gives slightly under your finger. Save something and the interface confirms it before you have time to wonder. You drag a card and it settles into its slot with just enough weight that you believe it landed. Good interface motion closes the loop between what a person did and what the system understood, and it does that faster than words ever could. A press state isn’t decoration. It’s the interface saying it heard you.
The second is hierarchy and continuity. When a panel slides in from the right edge, you learn where it lives and where it’ll go when you’re done with it. When a thumbnail grows into a full view, the motion tells you these are the same object, not two different places. Animation can carry spatial logic that would take a paragraph to explain, and nobody reads that paragraph anyway. The interface teaches itself, a few hundred milliseconds at a time.
Here’s the test we use: pause the animation. If the page lost information, meaning you no longer know what happened, where something came from, or what deserves your attention next, the motion was doing real work. If the page just lost sparkle, it was garnish. And garnish has a price. It costs load time, battery, and attention, which is the one budget your users never agreed to share with you.
Restraint is the actual skill
Anyone can add animation. Libraries have made it a one-line decision, which is roughly the problem. The skill is subtraction, and it works like a budget: every page gets a small allowance of motion, and you spend it where meaning lives. If the most important thing on the screen moves, movement means importance. If everything moves, movement means nothing, and you’ve spent your loudest voice teaching people to ignore it.
The sites that feel expensive are almost never the ones with the most animation. They’re the ones where every transition seems inevitable, where you can’t imagine the element arriving any other way. That reads as confidence. Twelve entrance effects on one screen reads as a team that couldn’t decide what mattered, so it italicized the whole page.
Duration belongs to the same vocabulary. Interface feedback lives around a couple hundred milliseconds, quick enough to feel like cause and effect rather than theater. Stretch the same movement to a full second and it stops confirming and starts performing; nothing about the easing changed, but the meaning did.
Speed is tone of voice.
Most pages are speaking slower than they think, and calling it elegance.
The people you’re making dizzy
There’s a less comfortable reason for restraint. For people with vestibular disorders, parallax and zoom and large sweeping transitions aren’t a style choice. They’re nausea, vertigo, sometimes a migraine that ends the workday. That’s who the reduced-motion setting exists for, and every modern browser will tell your stylesheet when someone has turned it on. Honoring it isn’t extra credit. It’s table stakes.
But honor it properly. The lazy version checks the flag and deletes every transition, leaving a site that snaps around like a slideshow from 1997: a broken experience offered as an apology. The craftsman’s version treats reduced motion as a first-class variant: crossfades where things used to fly, opacity where things used to zoom, feedback intact, meaning intact, just without the vertigo.
@media (prefers-reduced-motion: reduce) {
/* crossfade instead of fly, fade instead of zoom */
}Someone chose that setting for a reason. Design for the reason.
Barn owls are famous for flying in near silence. The leading edge of each wing feather is fringed like a comb, breaking up the air so the wingbeat makes almost no sound at all. All that motion, none of it wasted, none of it announcing itself. It’s what makes them good at their job.
That’s the brief.
