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.

2. 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.

3. Staging

Direct attention to the most important element. Use contrast in motion, size, color, z-index, and blur to create clear visual hierarchy.

4. 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.