Accordion & Dropdown Animation Principles

Apply Disney's 12 principles to expand/collapse elements for smooth, informative reveals.

Principles Applied to Accordions

1. Squash & Stretch

Content can slightly compress as it collapses, stretch as it expands. Trigger header can squash on click feedback.

2. Anticipation

Before expanding, header briefly depresses. Chevron starts rotation before content reveals. Builds expectation.

3. Staging

Expanded section should be clearly visible. Consider dimming other accordion items. Active header stays highlighted.

4. Straight Ahead & Pose to Pose

Define clear states: collapsed, expanding, expanded, collapsing. Pose-to-pose for controlled, reversible animations.