Motion withmeaning.

Animation should explain, guide or reward. If it does none of those, it is decoration — and decoration costs attention.

Name the job of each animation in one word. No word, no animation.

Rule of thumb

Start with the few moments that matter most: arrival, key reveals and confirmations.

Linear motion feels mechanical. Ease-out feels responsive. A gentle spring feels playful. Choose one family per brand and stick to it.

Enter with ease-out · Exit with ease-in · Play with a soft spring.

Our structure

Consistency matters more than the curve you pick.

Small things move fast, big things move slower. Most interface motion lives between 200 and 600 milliseconds.

Halve your first guess at a duration. It is almost always too slow.

Try this

Long page reveals can stretch to 900ms when they are the main event.

When several things move, stagger them so the eye has a path. A 40–80ms offset between items is usually enough.

One focal motion at a time · Short staggers · Nothing loops forever.

Checklist

And always respect reduced-motion settings — fade instead of moving.