motion that does work, not motion that decorates.
the four jobs of motion
- continuity — show where something came from or where it went.
- state change — confirm that something happened or is happening.
- hierarchy — direct attention without screaming.
- personality — express the brand in a few signature moves.
if a motion doesn't do one of these jobs, cut it.
defaults to start from
duration
- micro (state toggles, button feedback): 100-150ms
- standard (panel open, page transition): 200-300ms
- deliberate (large surface change, onboarding moments): 400-600ms
motion longer than 600ms needs a reason.
easing
- linear: only for loading indicators and progress bars
- ease-out: entering elements (decelerating into place)
- ease-in: exiting elements (accelerating away)
- ease-in-out: cross-fades and continuous changes
- custom cubic-bezier: signature moments, used sparingly
staggering
when multiple elements animate together, stagger by 20-50ms unless the meaning requires them to move as a unit.
what to specify per interaction
- trigger: what causes it
- properties animated: which css properties or transforms
- duration: in ms
- easing: by name or cubic-bezier values
- delay: if any
- reverse behavior: what happens when the trigger is removed
- reduced-motion fallback: what plays when prefers-reduced-motion is on
what to avoid
- bouncing every animation
- animating layout properties (width, height) when transform would work
- animations that block interaction
- celebrations that fire on routine actions
- micro-animations on every element (the product feels twitchy)