Micro-interaction Animation
Apply Disney's 12 animation principles to small UI feedback moments and interface details.
Quick Reference Principle Micro-interaction Implementation Squash & Stretch Button press compression, toggle bounce Anticipation Hover state hints, pre-click feedback Staging Focus attention on active element Straight Ahead / Pose to Pose Progress vs state changes Follow Through / Overlapping Ripple effects, settling motion Slow In / Slow Out Snappy but smooth transitions Arc Toggle switches, circular menus Secondary Action Icons respond to parent state Timing 100-300ms for most interactions Exaggeration Clear but not distracting Solid Drawing Consistent transform behavior Appeal Delightful, purposeful feedback Principle Applications
Squash & Stretch: Buttons compress slightly on press (scaleY: 0.95). Toggle thumbs squash when hitting bounds. Notification badges bounce on update. Keep subtle—this is UI, not cartoon.
Anticipation: Hover states prepare for click. Buttons lift/grow slightly before press animation. Draggable items elevate on grab start. Loading spinners wind up before spinning.
Staging: Active form field clearly distinguished. Error states demand attention. Success confirmations are unmistakable. One interaction feedback at a time.
Straight Ahead vs Pose to Pose: Progress indicators animate continuously (straight ahead). Checkboxes snap between states (pose to pose). Combine: loading indicator ends with state-change snap.
Follow Through & Overlapping: Ripple effects expand past tap point. Toggle switches overshoot then settle. Checkmarks draw with slight delay after box fills. Menu items stagger in.
Slow In / Slow Out: Quick ease-out for responsive feel. 100ms with ease-out feels instant. Avoid linear—looks broken. Snappy entrance, gentle settling.
Arc: Toggle switches travel in slight arc. Circular action buttons expand radially. Dropdown carets rotate smoothly. Menu items can follow curved path.
Secondary Action: Icon changes color as button state changes. Badge count updates with parent notification. Helper text appears as input focuses. Shadow responds to elevation.
Timing: Immediate feedback: 50-100ms. Standard transitions: 100-200ms. Complex micro-interactions: 200-300ms. Anything longer feels sluggish for small UI.
Exaggeration: Enough to notice, not enough to distract. Error shakes: 3-5px, not 20px. Success scales: 1.05-1.1, not 1.5. Subtle but unmistakable.
Solid Drawing: Transform origin matters—buttons scale from center, tooltips from pointer. Consistent behavior across similar elements. Maintain visual integrity during animation.
Appeal: Micro-interactions add personality without overwhelming. Users should feel the interface is responsive and alive. Small delights build into overall experience quality.
Component Patterns Button States .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 .toggle-thumb { transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1); } .toggle-thumb.active { transform: translateX(20px); }
Checkbox .checkmark { stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset 200ms ease-out 50ms; } .checkbox:checked + .checkmark { stroke-dashoffset: 0; }
Timing Reference Interaction Duration Easing Hover 100ms ease-out Click/tap 100ms ease-out Toggle 150-200ms spring/elastic Checkbox 150ms ease-out Focus ring 100ms ease-out Tooltip show 150ms ease-out Tooltip hide 100ms ease-in Badge update 200ms elastic Form error 200ms ease-out Best Practices Every interactive element needs feedback Disabled states: no animation, reduced opacity Group related feedback together Don't animate on every change—filter unnecessary updates Test without animation—functionality shouldn't depend on it Respect prefers-reduced-motion