Motion is feedback
Every animation should answer a question the user was about to ask: what changed, where did that go, is anything happening.
Three legitimate jobs. Feedback: something registered your input. Continuity: this panel came from that button, so the eye can follow. Status: work is happening and the interface has not frozen. If a movement does none of those, it is costing attention and returning nothing.
Duration follows distance and importance. A button state change wants 100 to 150 milliseconds; a panel sliding across a screen wants 200 to 300; anything past 400 starts to feel like waiting for the interface rather than watching it. The most common mistake in generated CSS is a flat 300ms transition applied to everything, which makes small things sluggish and large things abrupt at the same time.
The other common mistake is animating on load. Content that fades in on first paint delays the thing the visitor came for and defeats every performance measurement you took, and it is the animation people ask for most often.
You should now be able to
- State the purpose of an animation before building it
- Choose a duration from the distance and the intent
- Distinguish feedback, continuity and delight
Loading…