Universal Animation Patterns

Apply Disney's 12 principles as baseline defaults for any animation.

Core Timing Scale

Category Duration Use For

Instant 100-150ms Hovers, toggles, micro-states

Fast 150-250ms Feedback, small transitions

Standard 250-400ms Modals, reveals, state changes

Slow 400-600ms Page transitions, sequences

Deliberate 600-1000ms Dramatic reveals, celebrations

Universal Easing Library

:root { /* Standard easings / --ease-out: cubic-bezier(0, 0, 0.2, 1); / Entrances / --ease-in: cubic-bezier(0.4, 0, 1, 1); / Exits / --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); / State changes */

/* Spring easings / --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); / Overshoot / --ease-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55); / Playful */ }

The 12 Principles Quick Reference

• Squash & Stretch: Scale 0.95-1.05 range for organic feel

• Anticipation: 2-3px reverse movement or 50ms pause before action

• Staging: Animate toward user attention, clear visual hierarchy

• Straight Ahead vs Pose-to-Pose: Define keyframes, plan states

• Follow Through: Overshoot by 2-5%, settle back

• Slow In/Slow Out: Always ease, never linear (except spinners)

• Arcs: Combine X+Y movement, natural paths

• Secondary Action: Layer 2-3 properties max (opacity + transform + shadow)

• Timing: Match duration to distance/importance

• Exaggeration: Subtle for UI (under 10% deviation)

• Solid Drawing: Maintain visual consistency during motion

• Appeal: Motion should feel helpful, not performative

Base Animation Classes

/* Standard entrance */ .animate-in { animation: fade-in 250ms var(--ease-out) forwards; }

/* Standard exit */ .animate-out { animation: fade-out 200ms var(--ease-in) forwards; }

/* State transition */ .animate-state { transition: all 200ms var(--ease-in-out); }

@keyframes fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

@keyframes fade-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-10px); } }

Universal Rules

• 100ms Response Time: User actions must trigger visible change within 100ms

• Under 400ms for UI: Functional animations shouldn't exceed 400ms

• Reduce Motion: Always provide prefers-reduced-motion alternative

• GPU Properties: Use only transform and opacity for smooth 60fps

• Exit < Enter: Exits 20-30% faster than entrances

Accessibility Default

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }

Decision Tree

• Is element entering? → Use ease-out, 200-300ms

• Is element exiting? → Use ease-in, 150-250ms

• Is element changing state? → Use ease-in-out, 150-250ms

• Is it continuous? → Use linear (rotation) or ease-in-out (pulse)

• Is it responding to gesture? → Use ease-out with overshoot, under 200ms

When uncertain, start with: 250ms cubic-bezier(0.4, 0, 0.2, 1)