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.
- skills.sh installs
- 534
- GitHub stars
- 146
- last updated
- Aug 21, 2026
Install
$ npx -y skills add dylantarre/animation-principles --skill state-changes --agent claude-codeInstalls into .claude/skills of the current project.
Files
State Change Animations
Apply Disney's 12 principles when elements transform without leaving.
Principle Application
Squash & Stretch: Elements compress before expanding. A toggle switch squashes 5% before sliding.
Anticipation: Wind up before the change. Slight reverse movement (2-3px) before expanding.
Staging: Keep transformations centered on user focus. Don't let state changes distract from the interaction point.
Straight Ahead vs Pose-to-Pose: Define exact states. Button has rest, hover, active, disabled - each precisely designed.
Follow Through & Overlapping: Parts transform at different rates. Icon rotates before label fades in.
Slow In/Slow Out: Use ease-in-out for bidirectional changes: cubic-bezier(0.4, 0, 0.2, 1).
Arcs: Rotating elements follow natural arcs. Chevrons rotate on their center point, not linearly.
Secondary Action: Pair the primary change with supporting motion. Toggle sliding + color shift + icon swap.
Timing:
- Micro-states: 100-150ms (checkbox tick, radio fill)
- Standard states: 150-250ms (toggles, accordions)
- Complex states: 250-400ms (multi-part transformations)
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
- Category
- Design & UI/UX
- First seen
- Jun 3, 2026
More from dylantarre/animation-principles
All 144- Popmotion533
- Professionalism Credibility533
- Comfort Safety532
- Implementation Debugging532
- Technical Constraints532
- Friendliness Approachability531
- Motion Sickness531
- Large 500 800ms530
- Medium 300 500ms530
- Universal Industry530
- Trust Reliability529
- Deliberate 1200 2000ms528
- Product Manager528
- Small 200 300ms528
- Universal Elements528
- Universal Practitioner527
- Universal Solutions527
- Universal Tool527
- Accessibility Issues525
- Universal Fallback525
- Instant 0 100ms524
- Ux Friction524
- Media Publishing521
- Slow 800 1200ms520
Recommended
More Design & UI/UX
implementation-debuggingdylantarre/animation-principlesUse when animation doesn't work as expected, has bugs, or behaves inconsistently532skills.sh installstechnical-constraintsdylantarre/animation-principlesUse when animation is limited by browser support, platform capabilities, or technical requirements532skills.sh installsfriendliness-approachabilitydylantarre/animation-principlesUse when creating animations that feel warm, welcoming, and make users feel comfortable engaging.531skills.sh installslarge-500-800msdylantarre/animation-principlesUse when building larger movement animations between 500-800ms - hero transitions, complex reveals, animations that tell a story and deserve attention530skills.sh installsuniversal-fallbackdylantarre/animation-principlesUse when the animation domain is unclear or spans multiple contexts—provides general-purpose Disney animation principle guidance.525skills.sh installsmedia-publishingdylantarre/animation-principlesUse when designing animations for news sites, content platforms, publishing apps, or media consumption experiences521skills.sh installs