Audit animation code against Disney's 12 principles adapted for web. Use when reviewing motion, implementing animations, or checking animation quality. Outputs file:line findings.
Review animation code for compliance with Disney's 12 principles adapted for web interfaces.
file:line format| Priority | Category | Prefix |
|---|---|---|
| 1 | Timing | timing- |
| 2 | Easing | easing- |
| 3 | Physics | physics- |
| 4 | Staging | staging- |
timing-under-300msUser-initiated animations must complete within 300ms.
Fail:
.button { transition: transform 400ms; }
Pass:
.button { transition: transform 200ms; }
timing-consistentSimilar elements must use identical timing values.
Fail:
.button-primary { transition: 200ms; }
.button-secondary { transition: 150ms; }
Pass:
.button-primary { transition: 200ms; }
.button-secondary { transition: 200ms; }
timing-no-entrance-context-menuContext menus should not animate on entrance (exit only).
Fail:
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} />
Pass:
<motion.div exit={{ opacity: 0 }} />
easing-entrance-ease-outEntrances must use ease-out (arrive fast, settle gently).
Fail:
.modal-enter { animation-timing-function: ease-in; }
Pass:
.modal-enter { animation-timing-function: ease-out; }
easing-exit-ease-inExits must use ease-in (build momentum before departure).
Fail:
.modal-exit { animation-timing-function: ease-out; }
Pass:
.modal-exit { animation-timing-function: ease-in; }
easing-no-linear-motionLinear easing should only be used for progress indicators, not motion.
Fail:
.card { transition: transform 200ms linear; }
Pass:
.progress-bar { transition: width 100ms linear; }
easing-natural-decayUse exponential ramps, not linear, for natural decay.
Fail:
gain.gain.linearRampToValueAtTime(0, t + 0.05);
Pass:
gain.gain.exponentialRampToValueAtTime(0.001, t + 0.05);
physics-active-stateInteractive elements must have active/pressed state with scale transform.
Fail:
.button:hover { background: var(--gray-3); }
/* Missing :active state */
Pass:
.button:active { transform: scale(0.98); }
physics-subtle-deformationSquash/stretch deformation must be subtle (0.95-1.05 range).
Fail:
<motion.div whileTap={{ scale: 0.8 }} />
Pass:
<motion.div whileTap={{ scale: 0.98 }} />
physics-spring-for-overshootUse springs (not easing) when overshoot-and-settle is needed.
Fail:
<motion.div transition={{ duration: 0.3, ease: "easeOut" }} />
// When element should bounce/settle
Pass:
<motion.div transition={{ type: "spring", stiffness: 500, damping: 30 }} />
physics-no-excessive-staggerStagger delays must not exceed 50ms per item.
Fail:
transition={{ staggerChildren: 0.15 }}
Pass:
transition={{ staggerChildren: 0.03 }}
staging-one-focal-pointOnly one element should animate prominently at a time.
Fail:
// Multiple elements with competing entrance animations
<motion.div animate={{ scale: 1.1 }} />
<motion.div animate={{ scale: 1.1 }} />
staging-dim-backgroundModal/dialog backgrounds should dim to direct focus.
Fail:
.overlay { background: transparent; }
Pass:
.overlay { background: var(--black-a6); }
staging-z-index-hierarchyAnimated elements must respect z-index layering.
Fail:
.tooltip { /* No z-index, may render behind other elements */ }
Pass:
.tooltip { z-index: 50; }
When reviewing files, output findings as: