Motion with a motive: designing animation that earns its place

Animation is often added at the end of a project, like seasoning. The result is motion that decorates instead of explains. The best motion is designed alongside layout, because it answers the same question: what should the visitor understand next?

Three jobs motion can do

Every animation on a site should do at least one of three jobs. It can establish hierarchy by revealing the most important element first. It can explain change by showing where something came from and where it went. Or it can reward attention with a moment of delight after an action.

If an animation does none of these, remove it. If it does one badly, simplify it.

Distance, duration and ease

Small elements travel short distances quickly. Large surfaces move further and slower. Entrances ease out so they land softly; exits ease in so they leave decisively. These rules sound basic, but most motion that feels cheap breaks one of them.

Motion is layout that happens over time. Design it with the same care.

Design the reduced version first

Writing the reduced motion version first forces clarity. If the page still makes sense with every animation replaced by a simple fade, the motion is enhancing a solid structure rather than hiding a weak one.