modals-dialogs

Modal & Dialog Animation Principles

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

Principles Applied to Modals

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

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

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

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

Modal container arrives first, content fades in 50-100ms after. Close button can have slight bounce at end. Stagger form fields.

Enter: ease-out (decelerates in). Exit: ease-in (accelerates out). cubic-bezier(0.16, 1, 0.3, 1) for smooth, bouncy enter.

If modal originates from a button, arc toward center rather than straight line. Creates more organic movement path.

While modal scales in (primary), backdrop fades (secondary), content staggers (tertiary). Each supports without competing.

Dramatic entrance for important alerts. Slight overshoot scale (1.02) before settling at 1.0. Error modals can shake briefly.

Modal shadows should match interface light source. Maintain consistent border-radius. Content should never overflow during animation.

Smooth entrances feel polished. Origin-point animation feels connected. Abrupt modals feel jarring. Invest in modal transitions.

CSS Implementation

.modal-backdrop { transition: opacity 250ms ease-out; }

.modal { animation: modalEnter 300ms cubic-bezier(0.16, 1, 0.3, 1); }

@keyframes modalEnter { from { opacity: 0; transform: scale(0.9) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } }

Key Properties

Source Transparency