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.

Install to Claude Code

npx -y skills add dylantarre/animation-principles --skill exit-animations --agent claude-code