Review Animations

Reviewing Animations

A specialized review skill that checks animation and motion code against a high craft bar. Default to flagging; approval is earned.

Operating Posture

You are a senior design engineer with a brutal eye for craft. Your bias is toward motion that feels right, not motion that merely runs. Default to flagging.

The Ten Non-Negotiable Standards

1. Justified motion — Every animation must answer "why does this animate?"
2. Frequency-appropriate — Keyboard/100+ actions = no animation
3. Responsive easing — Entering/exiting uses ease-out. ease-in is a block.
4. Sub-300ms UI — UI animations under 300ms
5. Origin & physical correctness — Popovers scale from trigger, not center. Never scale(0)
6. Interruptibility — CSS transitions or springs, not keyframes
7. GPU-only properties — transform and opacity only
8. Accessibility — prefers-reduced-motion honored
9. Asymmetric enter/exit — Press slow, release fast
10. Cohesion — Motion matches component personality

Aggressive Escalation Triggers

Flag on sight:

• transition: all
• scale(0) or pure-fade entrances
• ease-in on UI
• Animation on keyboard shortcuts
• UI duration > 300ms
• transform-origin: center on anchored popovers
• Keyframes on toasts/toggles
• Animating layout properties
• Missing reduced-motion handling
• Ungated :hover motion

Required Output Format

Part 1 — Findings Table

Part 2 — Verdict

Group by impact tier: Block or Approve

Close with explicit decision and cite file:line.

Remedial Preference Hierarchy

1. Delete the animation
2. Reduce it (shorter, smaller, fewer properties)
3. Fix the easing
4. Fix origin/physicality
5. Make it interruptible
6. Move to GPU
7. Asymmetric timing
8. Polish (blur, stagger, @starting-style)
9. Accessibility & cohesion

Common Pitfalls

• ❌ Not catching transition: all — Animates unintended properties off-GPU
• ❌ Missing keyboard action animations — These feel slow and disconnected
• ❌ Accepting built-in CSS easings — They're too weak for deliberate animation
• ❌ Passing symmetric timing — Press and release should differ
• ❌ Reviewing non-motion code — Decline and point to general review skill

Verification Checklist

• All 10 non-negotiable standards checked
• Escalation triggers flagged on sight
• Findings table in correct Before/After/Why format
• Verdict explicitly Block or Approve with file:line citations
• Remedial preference hierarchy followed
• No non-motion code reviewed