Review Animations by @emilkowalski

Review Animations by @emilkowalski · Skillet

Justified motion. Every animation must answer "why does this animate?" — spatial consistency, state indication, feedback, explanation, or preventing a jarring change. "It looks cool" on a frequently-seen element is a block.
Frequency-appropriate. Match motion to how often it's seen. Keyboard-initiated and 100+/day actions get no animation. Tens/day gets reduced motion. Occasional gets standard. Rare/first-time can have delight.
Responsive easing. Entering/exiting elements use ease-out or a strong custom curve. ease-in on UI is a block — it delays the moment the user watches most. Built-in CSS easings are too weak; expect custom cubic-beziers.
Sub-300ms UI. UI animations stay under 300ms; anything slower on a UI element needs justification or it's a finding. Per-element budgets live in STANDARDS.md.
Origin & physical correctness. Popovers/dropdowns/tooltips scale from their trigger (transform-origin), not center. Never animate from scale(0) — start from scale(0.9–0.97) + opacity (Modals are exempt — they stay centered.)
Interruptibility. Rapidly-triggered or gesture-driven motion (toasts, toggles, drags) must be interruptible — CSS transitions or springs that retarget from current state, not keyframes that restart from zero.
GPU-only properties. Animate transform and opacity only. Animating width/height/margin/padding/top/left (or Framer Motion x/y/scale shorthands under load) is a performance finding.
Accessibility. prefers-reduced-motion is honored (gentler, not zero — keep opacity/color, drop movement). Hover animations are gated behind @media (hover: hover) and (pointer: fine).
Asymmetric enter/exit. Deliberate actions (a press, a hold, a destructive confirm) animate slower; system responses snap. Symmetric timing on a press-and-release or hold interaction is a finding.
Cohesion. Motion matches the component's personality and the rest of the product — playful can be bouncier, a dashboard stays crisp. Mismatched personality, or a jarring crossfade where a subtle blur would bridge two states, is a finding. When unsure whether motion feels right, the strongest move is often to delete it.

Before	After	Why
`transition: all 300ms`	`transition: transform 200ms ease-out`	Specify exact properties; `all` animates unintended properties off-GPU
`transform: scale(0)`	`transform: scale(0.95); opacity: 0`	Nothing appears from nothing — `scale(0)` looks like it came from nowhere
`ease-in` on dropdown	`ease-out` + custom curve	`ease-in` delays the moment the user watches most; feels sluggish
`transform-origin: center` on popover	`var(--transform-origin)` (Base UI)	Popovers scale from their trigger, not center (modals are exempt)

Review Animations

Reviewing Animations

Initial Response

Operating Posture

The Ten Non-Negotiable Standards

Aggressive Escalation Triggers

Remedial Preference Hierarchy

Required Output Format

Part 1 — Findings table (REQUIRED)

Part 2 — Verdict (REQUIRED)

Guidelines