Every animation on a site is a small claim on someone's attention. The useful ones explain a relationship: this panel came from that button, this content is new, this thing is now loading. The rest are noise wearing a nice easing curve.
Give each animation a job
If an animation does not do one of those, it is a candidate for deletion — and deleting it usually makes the page feel faster.
- Orientation: show where a new surface came from.
- Feedback: confirm that an interaction registered.
- Continuity: connect two states so nothing appears to teleport.
- Emphasis: draw attention to one thing, rarely, and briefly.
Get durations right
Interface feedback should land between 120 and 240 milliseconds. Larger transitions can run 300 to 600. Anything past 800 milliseconds on a frequent interaction becomes something people wait through rather than enjoy.
Use easing that decelerates into place. Bouncy springs on every element read as cartoonish and add perceived latency.
Respect prefers-reduced-motion — properly
For some people, large parallax and sliding transitions cause genuine nausea and dizziness. Honouring the reduced-motion preference is not optional, and it does not mean removing all feedback.
The right response is to swap movement for a simple opacity change, disable parallax and autoplaying loops, and keep everything else exactly as functional as before.
Never make function depend on motion
Content that only appears after a scroll animation triggers is content that can fail to appear. Reveal effects should start from a visible base state or be applied progressively, so a stalled observer or an unsupported browser never leaves a blank page.
The same applies to hover-only information and custom cursors: they are enhancements. Anything essential must be reachable by keyboard, on touch, and with motion switched off.
Related service
See how we handle this