Page Transitions

This applies Disney's 12 animation principles to route changes and navigation patterns, which sounds academic but is actually dead practical. You get timing tables (200ms for crossfades, 300-400ms for slides), working CSS for standard patterns, and opinionated guidance like "exit ease-in, enter ease-out, never linear." It covers the View Transitions API for shared element morphs and includes a reduce-motion reminder. The best part is the restraint advice: regular navigation should be smooth, not theatrical, because users navigate constantly. If you've ever needed to justify why your page transitions feel wrong, the staging and timing sections will fix it.

Install to Claude Code

npx -y skills add dylantarre/animation-principles --skill page-transitions --agent claude-code