What is state-changes?

This Claude skill provides a specialized framework for creating high-quality UI state-change animations by applying Disney's 12 principles of motion to web development. It solves the common issue of rigid or jarring user interface transitions by offering precise timing recommendations, CSS implementation patterns, and easing functions for elements like toggles, accordions, and buttons, ensuring a polished and intuitive user experience.

When should I use state-changes?

state-changes is useful in the following scenarios: • Case 1: Implementing tactile toggle switches with 'squash and stretch' effects to provide satisfying physical feedback during user interactions. • Case 2: Creating smooth, non-linear accordion expansions using CSS Grid and optimized cubic-bezier easing to prevent layout jumping. • Case 3: Applying 'anticipation' and 'overshoot' to button states to make micro-interactions feel responsive, alive, and professional. • Case 4: Standardizing animation durations (100ms-400ms) across a component library to maintain visual consistency and brand integrity.

name	state-changes
description	Use when elements transform in place - toggle switches, expanding accordions, checkbox animations, button states, or any transformation without entering/exiting.

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)

Exaggeration: Overshoot slightly on state changes. Toggle goes 2px past, then settles.

Solid Drawing: Maintain element integrity during transformation. No distortion that breaks visual consistency.

Appeal: State changes should feel satisfying. Users clicked with intent - reward that intent.

Timing Recommendations

State Change	Duration	Easing	Notes
Checkbox	150ms	ease-out	Tick draws in
Toggle Switch	200ms	ease-in-out	Overshoot slightly
Radio Button	150ms	ease-out	Scale in from center
Accordion	250ms	ease-in-out	Height + rotation
Tab Switch	200ms	ease-in-out	Indicator slides
Button Active	100ms	ease-out	Scale to 0.97
Card Expand	300ms	ease-in-out	All properties together

Implementation Pattern

.toggle {
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.toggle-knob {
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1); /* Overshoot */
}

.toggle.active .toggle-knob {
  transform: translateX(20px);
}

Accordion Pattern

.accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 250ms ease-in-out;
}

.accordion.open .accordion-content {
  grid-template-rows: 1fr;
}

Key Rule

State changes are reversible. The animation to state B should be the inverse of animation to state A. Test both directions.

state-changes

When & Why to Use This Skill

Use Cases