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.
- skills.sh installs
- 572
- GitHub stars
- 146
- last updated
- Aug 21, 2026
Install
$ npx -y skills add dylantarre/animation-principles --skill modals-dialogs --agent claude-codeInstalls into .claude/skills of the current project.
Files
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.
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/dylantarre/animation-principles
- Category
- Design & UI/UX
- First seen
- Jun 3, 2026
More from dylantarre/animation-principles
All 144- Slow In Out Mastery572
- Spatial Thinking572
- Ux Researcher571
- Excitement Energy570
- Anticipation Payoff568
- Calm Relaxation566
- Joy Delight566
- Attention Grabbers565
- Brand Consistency565
- Timing Principle Mastery565
- Micro 100 200ms564
- Exaggeration Mastery562
- Performance Optimization562
- React Spring562
- Enterprise B2b558
- Cards Containers557
- Orchestrated Sequences557
- Universal Emotion556
- Loaders Spinners554
- Forms Inputs553
- Secondary Action Mastery551
- Social Media551
- Attention Management550
- Brand Strategist548
Recommended
More Design & UI/UX
excitement-energydylantarre/animation-principlesUse when creating animations that generate enthusiasm, build anticipation, or create high-energy experiences.570skills.sh installsjoy-delightdylantarre/animation-principlesUse when creating animations that evoke happiness, surprise, or delightful moments in the user experience.566skills.sh installsmicro-100-200msdylantarre/animation-principlesUse when building micro-interactions between 100-200ms - tooltips appearing, dropdown opens, small feedback animations that feel quick but perceptible564skills.sh installsperformance-optimizationdylantarre/animation-principlesUse when animation runs slow, janky, or causes frame drops562skills.sh installsreact-springdylantarre/animation-principlesUse when implementing Disney's 12 animation principles with React Spring's physics-based animations562skills.sh installscards-containersdylantarre/animation-principlesUse when animating cards, panels, tiles, or container elements to create depth and interactivity557skills.sh installs