Animation Principles

Animation Principles for UI

Disney's 12 animation principles adapted for web and mobile interfaces. Based on dylantarre/animation-principles.

The 12 Principles: Web Implementation

Principle Details

Squash & Stretch: Apply scaleY compression on button press, scaleX stretch on hover. Keep volume constant: if you compress Y, expand X slightly. Keep subtle in UI; this is interfaces, not cartoons.

Anticipation: Before expanding a dropdown, shrink it 2-3% first. Before sliding content left, move it 5px right. Hover states prepare for click. Draggable items elevate on grab start.

Staging: Dim background elements during modal focus. Use motion to direct eye flow: animate important elements first. Active form fields are clearly distinguished. One interaction feedback at a time.

Straight Ahead vs Pose to Pose: Use CSS @keyframes for predictable, repeatable animations (pose to pose). Use JavaScript/GSAP for dynamic, physics-based motion (straight ahead). Progress indicators = straight ahead. Checkboxes = pose to pose.

Follow Through & Overlapping: Child elements complete movement after parent stops. Use animation-delay with decreasing values for natural stagger (30-50ms per item). Ripple effects expand past tap point. Toggle switches overshoot then settle.

Slow In / Slow Out: Never use linear for UI motion. Standard: cubic-bezier(0.4, 0, 0.2, 1). Enter: cubic-bezier(0, 0, 0.2, 1) (ease-out). Exit: cubic-bezier(0.4, 0, 1, 1) (ease-in). Exit animations shorter than enter (~60-70% of enter duration).

Arc: Elements in nature move in arcs, not straight lines. Use offset-path or combine X/Y transforms with different easings. Toggle switches travel in slight arc. Circular action buttons expand radially.

Secondary Action: Button shadow grows/blurs on hover. Icon inside button rotates while button scales. Background particles respond to primary element. Shadow responds to elevation changes.

Timing: See the complete timing reference table below. Micro-interactions: 100-200ms. Standard transitions: 200-400ms. Complex sequences: 400-700ms.

Exaggeration: Hover states scale to 1.05-1.1, not 1.01. Error shakes move 10-20px, not 2px. Make motion noticeable but not jarring. Save theatrics for key moments (onboarding, achievement).

Solid Drawing: Maintain consistent transform-origin. Use perspective for 3D depth. Avoid conflicting transforms. Buttons scale from center, tooltips from pointer.

Appeal: Target 60fps using transform and opacity only. Add personality through custom easing curves. Motion should feel intentional: if you can't explain why something animates, remove it.

Timing Reference

By Interaction Type

By Time Scale

Code Patterns

Micro-interactions

/* Button with squash/stretch */
.button {
  transition: transform 100ms ease-out, box-shadow 100ms ease-out;
}
.button:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.button:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* Toggle switch with overshoot */
.toggle-thumb {
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.toggle-thumb.active {
  transform: translateX(20px);
}

/* Checkbox draw effect */
.checkmark {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  transition: stroke-dashoffset 200ms ease-out 50ms;
}
.checkbox:checked + .checkmark {
  stroke-dashoffset: 0;
}

/* Dropdown with anticipation */
.dropdown-enter {
  animation: dropdown-open 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes dropdown-open {
  0% { transform: scaleY(0.98); opacity: 0; }
  100% { transform: scaleY(1); opacity: 1; }
}

Page Transitions

/* Crossfade (default) */
.page-exit-active {
  opacity: 0;
  transition: opacity 200ms ease-in;
}
.page-enter {
  opacity: 0;
}
.page-enter-active {
  opacity: 1;
  transition: opacity 200ms ease-out;
}

/* Slide (hierarchical navigation) */
.page-enter {
  transform: translateX(100%);
}
.page-enter-active {
  transform: translateX(0);
  transition: transform 300ms ease-out;
}
.page-exit-active {
  transform: translateX(-30%);
  transition: transform 300ms ease-in;
}

/* Shared element (View Transitions API) */
.hero-image {
  view-transition-name: hero;
}
::view-transition-old(hero),
::view-transition-new(hero) {
  animation-duration: 300ms;
}

Stagger Pattern

/* List items entering with stagger */
.list-item {
  opacity: 0;
  transform: translateY(10px);
  animation: stagger-in 300ms ease-out forwards;
}
.list-item:nth-child(1) { animation-delay: 0ms; }
.list-item:nth-child(2) { animation-delay: 40ms; }
.list-item:nth-child(3) { animation-delay: 80ms; }
.list-item:nth-child(4) { animation-delay: 120ms; }

@keyframes stagger-in {
  to { opacity: 1; transform: translateY(0); }
}

Framer Motion (React)

/* Spring-based animation */
<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  exit={{ opacity: 0, y: -10 }}
  transition={{ type: "spring", stiffness: 300, damping: 24 }}
/>

/* Stagger children */
<motion.ul variants={{
  show: { transition: { staggerChildren: 0.05 } }
}}>
  <motion.li variants={{
    hidden: { opacity: 0, y: 10 },
    show: { opacity: 1, y: 0 }
  }} />
</motion.ul>

/* Layout animation (shared element) */
<motion.div layoutId="hero-card" />

/* Reduced motion */
const prefersReducedMotion = useReducedMotion();
<motion.div
  animate={{ x: 100 }}
  transition={prefersReducedMotion ? { duration: 0 } : { type: "spring" }}
/>

Easing Reference

Navigation Direction Model

Accessibility: Reduced Motion

CSS Implementation

/* Default: full animation */
.element {
  transition: transform 300ms ease-out;
}

/* Reduced motion: replace with opacity or instant */
@media (prefers-reduced-motion: reduce) {
  .element {
    transition: opacity 200ms ease-out;
    /* Or: transition: none; */
  }

  /* Kill all animations globally */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Safe vs Harmful Motion

WCAG Compliance

• 2.3.3: Motion from interactions can be disabled unless essential
• 2.2.2: Moving content >5 seconds must be pausable
• 2.3.1: No content flashes >3 times per second

Performance Rules

1. Animate only transform and opacity for GPU acceleration
2. Use will-change sparingly; remove after animation completes
3. Prefer CSS over JavaScript when animation is predictable
4. Keep per-frame work under ~16ms for 60fps
5. Test on low-powered devices
6. Debounce scroll/resize-triggered animations
7. Use requestAnimationFrame for JS animations
8. Virtualize animated lists with 50+ items

Pre-Delivery Checklist

• prefers-reduced-motion respected globally
• All animations have reduced/no-motion alternative
• No auto-playing motion over 5 seconds
• Every interactive element has feedback (hover, active, focus)
• Disabled states have no animation, reduced opacity
• Exit animations are shorter than enter (~60-70%)
• No linear easing on UI transitions
• Only transform and opacity animated (no width/height/top/left)
• Stagger delay is 30-50ms per item (not simultaneous)
• No animation blocks user input
• Animations are interruptible (user gesture cancels in-progress motion)
• Motion direction is consistent with navigation model