Exit Animations
A systematic approach to making UI elements disappear in ways that feel intentional rather than jarring. Applies Disney animation principles to exits with specific timing recommendations: tooltips at 100ms, modals at 200ms, page transitions at 250ms. The core insight is that exits should be 20-30% faster than entrances and use ease-in curves, not ease-out. Combines opacity fades with directional movement because pure fades look like rendering errors. The collapse pattern for deleted list items is especially practical: fade content first, then collapse the container with a 100ms stagger. Turns dismissals and deletions from abrupt pops into confirmations that the user's action registered.
- skills.sh installs
- 547
- GitHub stars
- 146
- last updated
- Aug 21, 2026
Install
$ npx -y skills add dylantarre/animation-principles --skill exit-animations --agent claude-codeInstalls into .claude/skills of the current project.
Files
Exit Animations
Apply Disney's 12 principles when removing elements from view.
Principle Application
Squash & Stretch: Scale down to 95-98% on exit. Element compresses slightly as it departs.
Anticipation: Brief pause or micro-movement before departure. A 50ms hesitation acknowledges the exit.
Staging: Exit toward logical destinations. Deleted items fall down, dismissed modals shrink to origin, sidebars return to their edge.
Straight Ahead vs Pose-to-Pose: Pose-to-pose with clear visible→invisible states. Plan the exit trajectory.
Follow Through & Overlapping: Content exits before container. Text fades 50ms before the card collapses.
Slow In/Slow Out: Use ease-in for exits. Gentle start, accelerating departure: cubic-bezier(0.4, 0, 1, 1).
Arcs: Exit on curves, not straight lines. Dismissed notifications arc upward-and-out.
Secondary Action: Combine opacity fade with directional movement. Pure fades feel like errors.
Timing:
- Exits should be 20-30% faster than entrances
- Quick exits: 100-150ms (tooltips, dropdowns)
- Standard exits: 150-200ms (modals, toasts)
- Graceful exits: 200-300ms (page transitions)
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
- Categories
- Design & UI/UX, CLI & Terminal
- First seen
- Jun 3, 2026
More from dylantarre/animation-principles
All 144- Exaggerated Clarity546
- Accordions Dropdowns545
- Straight Ahead Pose Mastery543
- Timing Calibration543
- Continuous Loops542
- Lists Grids542
- Urgency Action542
- User Feedback Clarity542
- Power Confidence540
- Feedback Indicators539
- Universal Patterns539
- Continuous Infinite535
- Emotional Disconnect534
- Problem Diagnosis534
- Responsive Adaptive534
- State Changes534
- Popmotion533
- Professionalism Credibility533
- Comfort Safety532
- Implementation Debugging532
- Technical Constraints532
- Friendliness Approachability531
- Motion Sickness531
- Large 500 800ms530
Recommended
More Design & UI/UX
accordions-dropdownsdylantarre/animation-principlesUse when animating accordions, collapsibles, dropdowns, or expand/collapse elements for smooth reveal transitions545skills.sh installstiming-calibrationdylantarre/animation-principlesUse when animation speed feels wrong—too fast, too slow, or inconsistent543skills.sh installslists-gridsdylantarre/animation-principlesUse when animating lists, grids, tables, or collections of items to create smooth ordering, filtering, and loading states542skills.sh installsurgency-actiondylantarre/animation-principlesUse when creating animations that prompt immediate user action, highlight time-sensitivity, or drive conversions.542skills.sh installs
glassmorphismainergiz/design-inspirationsCreates frosted glass UI elements with blur, transparency, and subtle borders. Use when building overlays, floating controls, tooltips, or any element that shou541skills.sh installspower-confidencedylantarre/animation-principlesUse when creating animations that convey strength, authority, or bold confidence in brand and product.540skills.sh installs