Name the purpose or cut it

Every animation names one of six jobs. If you can't name one, delete it.

The six wordsGate question 2: why does this animate?
Feedback
press scale, hold-to-confirm fill
Spatial consistency
toast enters and exits the same edge; panel grows from its trigger
State indication
morphing button, expanding accordion
Preventing a jarring change
content that would teleport, appear or vanish with no bridge
Explanation
shows how a feature works; marketing and onboarding only
Delight
only at the Rare / first-time tier

From find-animation-opportunities, The Gate, question 2.

Purpose picker

Trigger each moment, then name its purpose.

6 unreviewed

Button press

Tens/day

Toast appearing

Occasional
Invoice sent

Accordion

Tens/day

Marketing explainer

Rare

Card hover wiggle

Tens/day

Confetti on first invoice

Rare

const PURPOSES = ["feedback", "spatial", "state", "jarring", "explanation", "delight"];

function allowAnimation({ purpose, frequency, surface }) {
  if (!PURPOSES.includes(purpose)) return false;
  if (frequency === "100+/day") return false;
  if (purpose === "delight" && frequency !== "rare") return false;
  if (purpose === "explanation" && surface !== "marketing") return false;
  return true;
}

The deletion test

Try both, remove the motion, then try again.

Card wobbles on hoverNo purpose
rotate(±3deg) · 480ms
Grows from triggerSpatial
scale(0.95) → 1 · origin top left · 200ms
.panel {
  transform-origin: top left;
  transform: scale(0.95); opacity: 0;
  transition: transform 200ms var(--ease-out), opacity 150ms ease;
}
.panel.open { transform: none; opacity: 1; }

Why it matters, pros and cons

Why it matters

Motion without a named job is decoration, replayed thousands of times.

Pros

  • A one-word test for code review.
  • The purpose picks the values.
  • Keeps delight rare enough to register.

Cons

  • A name is necessary, not sufficient.
  • "Feedback" gets claimed for hover wobbles.
  • Marketing pages play by different rules.