12 Principles Of Animation

12 Principles of Animation

Review animation code for compliance with Disney's 12 principles adapted for web interfaces.

Triggers

• animation
• motion
• transition
• keyframe
• spring
• ease
• timing
• squash
• stretch
• anticipation
• animate
• css animation
• framer motion
• gsap

How It Works

1. Read the specified files (or prompt user for files/pattern)
2. Check against all rules below
3. Output findings in file:line format

Rule Categories

Rules

Timing Rules

timing-under-300ms

User-initiated animations must complete within 300ms.

Fail:

.button { transition: transform 400ms; }

Pass:

.button { transition: transform 200ms; }

timing-consistent

Similar 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-menu

Context menus should not animate on entrance (exit only).

Fail:

<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} />

Pass:

<motion.div exit={{ opacity: 0 }} />

Easing Rules

easing-entrance-ease-out

Entrances 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-in

Exits 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-motion

Linear 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-decay

Use 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 Rules

physics-active-state

Interactive 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-deformation

Squash/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-overshoot

Use 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-stagger

Stagger delays must not exceed 50ms per item.

Fail:

transition={{ staggerChildren: 0.15 }}

Pass:

transition={{ staggerChildren: 0.03 }}

Staging Rules

staging-one-focal-point

Only 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-background

Modal/dialog backgrounds should dim to direct focus.

Fail:

.overlay { background: transparent; }

Pass:

.overlay { background: var(--black-a6); }

staging-z-index-hierarchy

Animated elements must respect z-index layering.

Fail:

.tooltip { /* No z-index, may render behind other elements */ }

Pass:

.tooltip { z-index: 50; }

Output Format

When reviewing files, output findings as:

file:line - [rule-id] description of issue

Example:
components/modal/index.tsx:45 - [timing-under-300ms] Exit animation 400ms exceeds 300ms limit
components/button/styles.module.css:12 - [physics-active-state] Missing :active transform

Summary Table

After findings, output a summary:

Verify

• The change was rendered in a browser/simulator and a screenshot or DOM snapshot was captured, not just code-reviewed
• Layout was checked at the breakpoints the 12-principles-of-animation guide calls out (mobile + desktop minimum); evidence of each is attached
• Color, typography, and spacing values used come from the project's design tokens / theme, not hard-coded ad-hoc values
• Keyboard navigation and focus order were exercised on every interactive element introduced
• Reduced-motion / dark-mode (when supported) variants were verified, not assumed to inherit
• No console errors or hydration warnings were emitted during the verification render

References

• The Illusion of Life: Disney Animation
• Apple WWDC23: Animate with Springs