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.

skills.sh installs: 718
GitHub stars: 146
last updated: Aug 21, 2026

View on GitHub

Install

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

Installs into .claude/skills of the current project.

Files

Page Transition Animation

Apply Disney's 12 animation principles to route changes, view transitions, and navigation patterns.

Quick Reference

Principle	Page Transition Implementation
Squash & Stretch	Entering page elastic effect
Anticipation	Exit animation before enter
Staging	Hero elements bridge views
Straight Ahead / Pose to Pose	Shared element vs crossfade
Follow Through / Overlapping	Content settles after nav
Slow In / Slow Out	Asymmetric enter/exit easing
Arc	Slide transitions with curve
Secondary Action	Background, nav state changes
Timing	200-500ms total transition
Exaggeration	Reserved for emphasis moments
Solid Drawing	Consistent spatial model
Appeal	Smooth, oriented navigation

Principle Applications

Squash & Stretch: Incoming pages can have subtle elastic settle. Modal sheets bounce slightly on full open. Pull-to-navigate stretches before triggering.

Anticipation: Current page begins exit before new page enters. Slight fade or scale prepares for change. Navigation indicator updates before page swaps.

SKILL.md on GitHub