animation-principles

Animation Principles for UI

Overview

Apply Disney's 12 principles of animation to create UI motion that feels natural, purposeful, and delightful. These principles, developed in the 1930s for character animation, translate directly to modern interface design.

When to Use

• Designing micro-interactions and transitions
• Making animations feel more natural and polished
• Reviewing animation quality in a design system
• Training team members on motion design fundamentals
• Creating animation guidelines for a design system

Quick Reference: The 12 Principles

Principle	UI Application	Priority
Easing (Slow in/out)	All transitions	Essential
Anticipation	Button press, drag start	High
Follow-through	Modals, dropdowns, toasts	High
Secondary Action	Loading states, notifications	Medium
Timing	Duration based on distance/importance	Essential
Squash & Stretch	Buttons, toggles, playful UI	Medium
Staging	Focus attention, reduce distraction	High
Arc	Natural movement paths	Medium
Exaggeration	Emphasis, delight moments	Low
Solid Drawing	Consistent 3D perspective	Low
Appeal	Brand personality	Medium
Straight Ahead / Pose to Pose	Complex sequences	Low

---

1. Easing (Slow In and Slow Out)

Principle: Objects don't start or stop instantly - they accelerate and decelerate.

In UI: Never use linear timing for UI animations. Use easing curves.

CSS Implementation

:root {
  /* Standard easing - use for most transitions */
  --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);      /* Decelerate */
  --ease-in: cubic-bezier(0.4, 0.0, 1, 1);         /* Accelerate */
  --ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1);   /* Both */

  /* Expressive easing - more personality */
  --ease-expressive: cubic-bezier(0.4, 0.14, 0.3, 1);

  /* Spring-like - for playful UI */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-overshoot: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ❌ Bad - robotic, unnatural */
.modal {
  transition: opacity 200ms linear;
}

/* ✅ Good - natural deceleration */
.modal {
  transition: opacity 200ms var(--ease-out);
}