Modal & Dialog Animation Principles

Apply Disney's 12 principles to modals for seamless, non-jarring transitions.

Principles Applied to Modals

1. Squash & Stretch

Modal can scale from 0.9 to 1.0 on enter, creating a subtle expansion feel. Exit reverses. Keep it subtle to maintain professionalism.

2. Anticipation

Trigger element (button) should react before modal appears. Brief scale-down of trigger, then modal emerges from that point.

3. Staging

Backdrop dims (0.5-0.7 opacity) to focus attention on modal. Background content can blur slightly (4-8px). Modal is the star.

4. Straight Ahead & Pose to Pose

Define states: hidden, entering, visible, exiting. Clear keyframes for each. Pose-to-pose ensures predictable, controllable animation.