Universal Animation Patterns Skill

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)

Agent Skills: Universal Animation Patterns

Install this agent skill to your local

Skill Files