Modals Dialogs

This applies Disney's 12 animation principles to modal and dialog transitions, giving you specific timing values and easing functions instead of vague advice. You get concrete recommendations like 250-350ms for entrances with ease-out, 200ms for exits with ease-in, and staggering content by 30-50ms per item. The approach treats modals like characters: anticipation on the trigger button, follow-through where the container arrives before content fades in, and secondary actions like backdrop dimming that support without competing. It's opinionated about details like scaling from 0.9 to 1.0 and using cubic-bezier(0.16, 1, 0.3, 1) for that polished feel. Worth reading if you're tired of modals that just pop into existence.

Install to Claude Code

npx -y skills add dylantarre/animation-principles --skill modals-dialogs --agent claude-code