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