playbooks

home / skills / dylantarre / animation-principles / state-changes

state-changes skill

/skills/05-by-animation-type/state-changes

This skill helps you design and implement in-place state change animations using Disney's principles to improve UI feedback.

npx playbooks add skill dylantarre/animation-principles --skill state-changes

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
2.7 KB
---
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

```css
.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

```css
.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.

Overview

This skill packages Disney’s 12 animation principles for UI state-change interactions. It guides designers and engineers on making in-place transformations feel natural, reversible, and satisfying. Use it to tune micro-interactions like toggles, checkboxes, accordions, and button states for clarity and appeal.

How this skill works

The skill inspects common state-change patterns and maps each to one or more animation principles (squash & stretch, anticipation, slow in/slow out, arcs, etc.). It recommends durations, easings, and small implementation patterns (CSS snippets and timing buckets) so transitions are consistent and reversible. It emphasizes testing both directions of a change and pairing primary motion with secondary actions for clarity.

When to use it

  • Toggles and switches that move or slide in place
  • Checkboxes, radio buttons, and micro-interactions (ticks, fills)
  • Accordions, card expands, and in-place content reveals
  • Button press/active states and hover-to-active transitions
  • Icon swaps or label changes that accompany a state shift

Best practices

  • Keep timing in tight buckets: micro (100–150ms), standard (150–250ms), complex (250–400ms).
  • Use ease-in-out or specified cubic-beziers for reversible motion and natural slow-in/slow-out.
  • Apply anticipation and slight overshoot for perceived responsiveness, but limit magnitude (1–5px or small scale).
  • Make secondary actions support the primary change (color shift, icon swap, subtle fade) rather than compete with it.
  • Design explicit states (rest, hover, active, disabled) and ensure animations are the inverse when toggling back.

Example use cases

  • Checkbox tick draws in 150ms with ease-out and a tiny scale for squash & stretch.
  • Toggle switch slides 200ms with a 2px overshoot using a more elastic knob easing.
  • Accordion expands height over 250ms with ease-in-out and a rotated chevron that follows an arc.
  • Button active state scales to 0.97 in 100ms to signal press feedback.
  • Tab switch slides an indicator 200ms while fading content with staggered overlapping motion.

FAQ

How do I choose durations for different elements?

Use the timing buckets: 100–150ms for micro-states, 150–250ms for standard controls, and 250–400ms for complex multi-part changes; adjust for perceived weight and user control.

What does reversible animation mean?

Every animation to state B should have a clear inverse to state A. Test both directions to avoid visual glitches and to keep interactions predictable.