Animation is the easiest thing to add to a website and the easiest thing to get wrong. Done well, it is invisible: things simply feel clear and alive. Done badly, it is the reason people close the tab.
The difference is rarely technical. It comes from asking, for each thing that moves, one plain question: what is this doing for the person looking at it?
The four jobs motion can do
Almost every good animation falls into one of four categories. If yours doesn't, it is probably decoration.
- Explain. Showing where something came from or went. A menu that slides from the edge tells you where it lives; a deleted item that shrinks away tells you it is gone and not lost.
- Guide. Pulling the eye to the next step. A subtle shift on a field with an error does more than a red paragraph of text.
- Confirm. Acknowledging an action. A button that responds when pressed reassures people the tap registered.
- Express. Carrying personality and mood. This is the most fun and the most dangerous, because it is the easiest to overdo.
Notice that three of the four are functional. Expression is welcome, but it should be the garnish, not the meal.
Speed is most of the feeling
The same movement can feel crisp or sluggish depending on duration alone. Some rough guidance that holds up well:
- Small changes, like a hover or a toggle, feel best between 100 and 200 milliseconds.
- Larger movements, like a panel opening, sit around 250 to 400.
- Anything over about 600 starts to feel like waiting, unless it is a deliberate moment of theatre.
Easing matters just as much. Things in the real world accelerate and slow down; a perfectly linear movement looks mechanical. Starting fast and finishing slowly (ease-out) is the safe default for things entering the screen, because it feels responsive.
Respect the people who can't take it
For some people, large movement on screen causes real discomfort: dizziness, nausea, headaches. Operating systems let users switch on a "reduce motion" setting, and websites can read it.
Honour it. That doesn't mean removing everything. It means replacing sweeping movement, parallax and zooming with gentle fades or nothing at all, while keeping the information those animations carried.
Be equally careful with anything that loops forever or flashes. If it can't be paused, it shouldn't be there.
Performance is part of design
An animation that stutters is worse than none. The reason is mostly physical: browsers can animate some properties cheaply (position, scale, opacity) and others expensively (anything that forces the page to recalculate its layout).
A few habits go a long way:
- Animate transforms and opacity wherever you can.
- Never animate something large and complex without testing on a mid-range phone, not just your own laptop.
- Stop animations that are off-screen. If nobody can see it, nobody should pay for it.
Test on the slowest device you reasonably expect. If it holds up there, it will be wonderful everywhere else.
Choreography over chaos
When many things move at once, the eye has nowhere to land. When they move in sequence, with small delays and a clear order, the page tells a story.
A good rule is one hero per moment. Decide what the most important thing on screen is right now and let it lead. Everything else supports, follows or waits. Staggering the arrival of a list by a few dozen milliseconds each, for example, is a tiny change that makes a page feel composed rather than dumped.
Know when to do nothing
The best animation decision is often to leave something still. Body text, forms, prices, legal information: anything people are there to read or complete should be calm. Movement competes for attention, and attention is the one thing every page is borrowing.
A useful final test is to remove each animation in turn and ask whether anyone would notice or care. If not, you have found something that was never helping. Keep the ones that make the experience clearer, and let the rest go.