Individual skill

state-changes

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

skills/05-by-animation-type/state-changes/SKILL.md

Read pinned source

Source commit 83597134ba8ff59838270f94d7ac7282ffa3b54d

What was checked

Matches the observed repository HEAD: Yes
Scanner rules are current: No
Repository scan complete: No
Skill scan complete: Yes
Observed behavior: Not checked yet
Last checked: Nov 6, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings): 144
Repository last updated: Dec 30, 2025
License: MIT

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

ai Repository topic
animation Repository topic
claude Repository topic
disney Repository topic
skills Repository topic
principles-of-animation Repository topic
engineering Derived category

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files

SKILL.mdcore · 2,815 bytes

Read excerpt


# 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.