Universal Element Animation Principles
Apply Disney's 12 principles to any UI element for consistent, professional motion design.
Universal Application of Principles 1. Squash & Stretch
Any element that responds to interaction can squash (compress on impact/press) and stretch (extend on release). Keep it subtle: 2-5% maximum for UI.
- Anticipation
Before any significant action, a brief preparatory motion signals what's coming. Scale down before scale up, pull back before push forward. 50-100ms duration.
- Staging
Direct attention to the most important element. Use contrast in motion, size, color, z-index, and blur to create clear visual hierarchy.
- Straight Ahead & Pose to Pose
Pose-to-pose for most UI: define start and end states clearly. Straight-ahead for organic, flowing animations like particles or organic shapes.
- Follow Through & Overlapping Action
Nothing stops all at once. Child elements lag behind parents. Shadows settle after objects. Stagger related elements 20-50ms apart.
- Ease In & Ease Out
The golden rule: never use linear for UI motion. Enter with ease-out, exit with ease-in, transition with ease-in-out.
- Arcs
Natural motion follows curved paths. Add subtle vertical movement to horizontal transitions. Rotate while translating. Avoid robotic straight lines.
- Secondary Action
Every primary action deserves supporting animation. Shadow changes, color shifts, icon rotations, glow effects reinforce without competing.
- Timing Element Type Fast Normal Slow Micro (icons, buttons) 50-100ms 100-200ms 200-300ms Small (cards, inputs) 150-200ms 200-300ms 300-400ms Medium (modals, menus) 200-250ms 250-350ms 350-500ms Large (pages, overlays) 300-400ms 400-600ms 600-800ms
- Exaggeration
Match animation intensity to context. Celebratory moments allow 20-30% exaggeration. Professional contexts keep it under 10%. Error states can be more dramatic.
- Solid Drawing
Maintain visual consistency: border-radius ratios, shadow directions, spacing rhythms, typography scale. Nothing should distort or break during animation.
- Appeal
The goal is delight without distraction. Smooth animations build trust. Snappy feedback feels responsive. The best animation is felt, not noticed.
CSS Foundation / Universal transition base / * { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
/ Standard durations as custom properties / :root { --duration-fast: 100ms; --duration-normal: 200ms; --duration-slow: 350ms; --ease-out: cubic-bezier(0.0, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55); }
/ Apply to any interactive element / .interactive { transition: transform var(--duration-normal) var(--ease-standard), opacity var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard); }
Key Properties (Any Element) transform: universal positioning and scaling opacity: visibility transitions transition: state changes animation: complex sequences box-shadow: depth and emphasis