animation-ux-principles

Animation & UX principles

Credit: the principle list comes from a video by @charles.unemployed (source).

Use this as a checklist while building or reviewing motion. Pick the few principles that fit the element; do not apply all twenty to everything. Motion that serves no purpose is noise, and frequency of use decides how much is allowed.

The 12 animation principles, translated to UI

Principle	In practice
Squash & stretch	Squish on impact (button press scaleY ~0.95), stretch in motion. Gives weight. Keep volume plausible.
Anticipation	A small pull-back before the big move (card dips 4px before launching, menu icon nudges before opening). Signals what is coming.
Staging	Direct the eye to one thing at a time. Dim/blur background, stagger entrances, never animate competing elements at once.
Pose to pose	Define key states (rest, hover, pressed, open) and let CSS/Motion tween between them. Prefer keyframes/variants over hand-driven frames.
Follow through	Parts keep moving after the main body stops, then settle: overshoot springs, trailing children with small delays.
Slow in & slow out	Never linear. Use ease-out for entrances, ease-in for exits, ease-in-out for moves, or springs.
Arcs	Move along curves, not straight lines: combine x and y with different easings, or animate along a path.
Secondary action	A small flourish backing the main action (icon wiggles when the button fires, a glow on success). Must not upstage it.
Timing	Duration sets feel. Keep UI animation under 300ms (micro 100-200ms, larger surfaces up to ~300ms). Longer only for rare, decorative moments.
Exaggeration	Push feedback past real so the moment lands (bigger success bounce, stronger error shake). Exaggerate the rare, not the routine.
Solid drawing	Give flat things depth and volume: layered shadows, parallax, perspective, consistent light direction.
Appeal	The sum of every detail. Align easings, durations and distances across the product so it feels like one hand made it.

The UX laws, as rules for motion and layout

• Fitts's law: bigger, closer targets are faster to hit. Size primary actions generously and place them near the pointer or thumb.
• Bigger hit areas: the clickable area may exceed the visual one. Pad with ::before/::after or padding to reach at least 44x44px; animate the visual, not the hit box, so it does not jitter.
• Hick's law: more choices mean slower decisions. Limit options, reveal progressively, highlight a default.
• Miller's law: people hold about 7 things in mind. Chunk lists and groups; stagger long lists in groups rather than item by item.
• Doherty threshold: respond within 400ms or it feels slow. Give instant feedback (<100ms) and use skeletons/progress for anything longer.
• Postel's law: accept messy input, return clean output. Forgive formatting, trim whitespace, normalize; animate errors gently and say how to fix them.
• Jakob's law: people expect your app to work like the apps they already know. Use familiar patterns (swipe, pull, modal dismiss, standard hover cues) and do not reinvent them for novelty.
• Frequency of use: the more often something is used, the less it should animate. Keyboard shortcuts, tab switches, and repeated list actions get little or no motion; first-run and rare celebrations can be richer.

Workflow

1. Say what the motion is for (orient, confirm, delight, guide attention). If nothing, drop it.
2. Check frequency: high-frequency, keep it instant or under ~150ms; rare, allow flourish.
3. Choose easing and duration from the table above; stay under 300ms for UI.
4. Add at most one secondary action per interaction.
5. Respect prefers-reduced-motion: replace movement with fades or nothing.
6. Animate transform and opacity only, to stay on the compositor and keep 60fps.
7. When reviewing, name which principle a flaw breaks, for example "linear easing breaks slow in & slow out" or "300ms stagger on a tab switch breaks frequency of use".

Output when reviewing

List findings as principle: issue -> fix, most visible first, and keep each fix concrete (a duration, easing, scale, or size).