playbooks

home / skills / dylantarre / animation-principles / modals-dialogs

modals-dialogs skill

/skills/07-by-ui-element/modals-dialogs

This skill helps you animate modals with Disney-inspired principles for smooth entrances, exits, and polished overlays across apps.

npx playbooks add skill dylantarre/animation-principles --skill modals-dialogs

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
2.6 KB
---
name: modals-dialogs
description: Use when animating modals, dialogs, popovers, or overlay content to create smooth entrances and exits
---

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

### 5. Follow Through & Overlapping Action
Modal container arrives first, content fades in 50-100ms after. Close button can have slight bounce at end. Stagger form fields.

### 6. Ease In & Ease Out
Enter: `ease-out` (decelerates in). Exit: `ease-in` (accelerates out). `cubic-bezier(0.16, 1, 0.3, 1)` for smooth, bouncy enter.

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

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

### 9. Timing
- Backdrop fade: 200-250ms
- Modal enter: 250-350ms
- Modal exit: 200ms (faster out)
- Content stagger: 30-50ms per item
- Shake on error: 300ms

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

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

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

## CSS Implementation

```css
.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
- `transform`: scale, translate (origin point)
- `opacity`: fade in/out
- `backdrop-filter`: blur background
- `animation`: keyframe sequences
- `transform-origin`: source point

Overview

This skill teaches how to animate modals, dialogs, popovers, and overlay content using Disney’s 12 principles of animation for smooth, non-jarring entrances and exits. It focuses on practical patterns—timing, easing, staging, and layered motions—so overlays feel polished and connected to their triggers. The guidance is implementation-agnostic and translates easily to CSS, JS, or animation libraries.

How this skill works

The skill inspects modal lifecycle states (hidden, entering, visible, exiting) and prescribes animation roles for each layer: backdrop, container, and internal content. It defines key properties (transform, opacity, transform-origin, backdrop-filter) and recommended timings, easings, and stagger strategies so movements are coordinated, readable, and performant. Small rules like origin-point arcs, subtle squash/stretch, and staggered content yield a cohesive experience.

When to use it

  • Any modal, dialog, popover, tooltip, or overlay that should feel polished and non-jarring
  • On entry and exit animations where user focus and context are important
  • When a trigger-element-driven origin point increases perceived continuity
  • For important alerts or contextual panels that need visual emphasis
  • When accessibility requires predictable, readable motion

Best practices

  • Define clear states: hidden, entering, visible, exiting and use pose-to-pose keyframes
  • Keep squash/stretch subtle (e.g., scale 0.9→1.0) to remain professional
  • Use layered timing: backdrop fades first/behind, container animates, then stagger content 30–50ms per item
  • Enter easing: ease-out or cubic-bezier(0.16,1,0.3,1); exit easing: ease-in and faster duration
  • Match shadows, border-radius, and light direction so motion feels grounded
  • Origin animations: animate from trigger point with a slight arc for organic movement

Example use cases

  • Standard centered dialog: backdrop 250ms, modal enter 300ms with scale+translate, content staggered 40ms
  • Popover from button: transform-origin set to button corner; modal arcs into place and backdrop blurs 4–8px
  • Error modal: brief shake (300ms) with a small overshoot (scale 1.02→1.0) for emphasis
  • Form modal: container arrives, then stagger form fields and buttons with 30–50ms delays
  • Notification sheet: faster exit (200ms) with ease-in to avoid lingering on dismissal

FAQ

How long should modal animations be?

Use ~250–350ms for entry and ~200ms for exit; shorter exits prevent linger and longer entries allow perceived polish.

Should I always blur the background?

Not always. Use dimming (0.5–0.7 opacity) as default and add a subtle blur (4–8px) when depth helps focus without harming performance.