Animation Principles for UI

Apply Disney's 12 principles of animation to UI design and learn the motion design fundamentals that make interfaces feel natural and intuitive.

50 min•By Priygop Team•Last updated: Feb 2026

Disney's Principles Applied to UI

Squash & Stretch: Buttons can subtly compress on press and expand on release — conveys a physical, tactile feel
Anticipation: A brief pullback before a swipe action or a slight scale-down before a bounce — prepares users for what's coming
Staging: Direct user attention to the most important element using motion — dim background when a modal opens, highlight a new notification
Follow-through & Overlapping: Elements don't stop all at once — a card slides in, then its content fades in slightly after. Creates natural momentum
Ease-in & Ease-out: Objects accelerate and decelerate naturally — nothing in the real world starts and stops at full speed
Arcs: Dragged elements follow curved paths, not straight lines — natural objects move in arcs due to physics
Secondary Action: While a modal slides up, the background subtly blurs — the primary action (modal) is supported by secondary motion (blur)

Duration Scale: Micro (50-100ms) for button states, Small (100-200ms) for icon changes, Medium (200-400ms) for page elements, Large (400-700ms) for full-page transitions
Easing Functions: Standard (ease-in-out) for most UI, Decelerate (ease-out) for entering elements, Accelerate (ease-in) for exiting elements, Spring for playful/elastic feel
Material Design Motion: Use Google's recommended cubic-bezier(0.4, 0.0, 0.2, 1) for standard easing — tested at scale
Z-axis Motion: Elements moving toward the user should scale up and gain shadow. Elements receding should scale down and lose shadow
Stagger: When multiple items animate in sequence, use a 50-100ms stagger delay between each — creates a cascading reveal effect
Choreography: Related elements should move together. A FAB expanding into a menu should coordinate all child elements in a unified motion