SKILL.md
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.
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.