Animation Principles

Apply the 12 principles of animation to create smooth, purposeful motion design for interfaces, presentations, and digital products. Bridges classic Disney animation theory with modern UI motion design.

Usage

Describe the animation you want to create or the UI transition you need to design. The guide recommends appropriate animation principles, timing, and implementation approaches.

Parameters

• Context: UI transition, Loading state, Micro-interaction, Page transition, or Data visualization
• Platform: CSS/Web, React/Framer Motion, After Effects, or Native mobile
• Purpose: Guide attention, Provide feedback, Show state change, or Delight
• Complexity: Simple (single property), Medium (choreographed), or Complex (narrative)

Examples

1. Button Micro-Interactions: Design hover, press, loading, and success states for a submit button using scale, opacity, and color transitions with specific easing curves and durations.

1. Page Transitions: Create a slide-and-fade page transition system for a SPA, with enter/exit choreography, stagger timing for list items, and reduced-motion fallbacks.

1. Dashboard Data Load: Animate chart elements drawing in on page load — bar charts growing from baseline, line charts drawing paths, and numbers counting up with stagger delays.

1. Modal Open/Close: Design a modal animation with backdrop fade, content scale-up from trigger element, and focus trap timing that feels responsive without being jarring.

Guidelines

• Duration recommendations: micro-interactions (100-200ms), transitions (200-500ms), complex (500ms+)
• Easing functions are specified with cubic-bezier values, not just "ease-in-out"
• The 12 principles are applied practically: squash/stretch for buttons, anticipation for state changes
• Reduced motion preferences are always addressed (prefers-reduced-motion media query)
• Animation should serve a purpose — decoration without function is removed
• Performance considerations: transform and opacity are preferred for 60fps
• Stagger patterns create visual hierarchy when multiple elements animate together
• Spring physics create natural-feeling motion (tension, friction, mass parameters)
• Accessibility implications are considered: seizure risk, vestibular disorders, cognitive load