Animation on a website is not decoration but a map for attention: it signals what appeared, what is clickable and what just changed. Trouble starts when motion stops carrying information and becomes an end in itself.
Three roles of useful motion
Before adding an animation we ask: which of the three roles does it play?
- Orientation: a reveal on scroll shows the hierarchy — what matters and what is secondary.
- Feedback: hover and tap confirm “I heard your click”.
- Continuity: a transition between states explains where things came from.
The rules that save us
Up to 0.7 seconds for blocks appearing and up to 0.3 for micro-interactions. One easing curve for the whole project. We animate only transform and opacity — layout is never touched.
And an iron rule: every infinite animation must switch off under prefers-reduced-motion. That is not a checkbox feature but basic respect for the user.