mcpField
M
modals-dialogs

modals-dialogs

github.com/dylantarreDesign & UI132532 installsUpdated 43w ago
Repository

About modals-dialogs

A design skill for animating modals and dialogs with Disney’s 12 animation principles. It describes state transitions, timing, easing, and layered motion, with CSS properties and implementation examples.

Key features

  1. 01Apply 12 principles to dialogs
  2. 02Define modal animation states
  3. 03Coordinate backdrop and content motion
  4. 04Set timing and easing guidance
  5. 05Use CSS transforms and opacity

Use cases

  1. 01Design modal enter and exit motion
  2. 02Stagger dialog content appearance
  3. 03Animate alerts and error feedback

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/dylantarre/animation-principles --skill modals-dialogs

After installing, type/modals-dialogsin Claude Code to confirm it loaded.

Details

From the project README

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

.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

Comments

Markdown supported