Motion with purpose.
WHAT ANIMATION SHOULD DO
Show relationships: where something came from, where it went
Direct attention Confirm an action Smooth a transition
WHAT IT SHOULD NOT DO
Delay the user Decorate without purpose Repeat indefinitely
WHAT DURATION SUITS INTERFACE MOTION
Short. Long enough to perceive, short enough not to wait.
WHAT TO ANIMATE
Properties the browser can handle efficiently: position and opacity.
WHAT TO AVOID ANIMATING
Properties forcing layout recalculation.
WHY
They cause visible stutter, particularly on modest devices.
WHAT TO RESPECT
The reduced motion preference.
WHY
Motion causes genuine discomfort and nausea for some people.
WHAT TO DO WHEN IT IS SET
Remove or substantially reduce motion.
WHAT TO NEVER ANIMATE
Anything the user must wait for Anything appearing repeatedly during normal use
WHAT TO TEST
On a modest device, where animation cost is visible.
WHAT TO CHECK
That nothing animates on page load, delaying content.
WHAT TO PREFER
Subtlety. Motion noticed as motion is usually too much.
