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