State Changes

This walks you through applying Disney's 12 animation principles specifically to UI elements that transform in place, like toggles, checkboxes, and accordions. You get concrete timing recommendations (checkboxes at 150ms, accordions at 250ms), specific easing curves, and CSS patterns you can actually use. The best part is the focus on bidirectionality: every state change should animate smoothly in reverse, which sounds obvious but is easy to mess up. It covers the details that make interactions feel right, like slight overshoot on toggles and sequential timing for complex changes. If you're tired of state changes feeling janky or arbitrary, this gives you a systematic approach with actual numbers to start from.

Install to Claude Code

npx -y skills add dylantarre/animation-principles --skill state-changes --agent claude-code