Card & Container Animation Principles

Apply Disney's 12 principles to cards and containers for engaging, dimensional interfaces.

Principles Applied to Cards

1. Squash & Stretch

Cards can subtly compress on drag-start and stretch when released. Keep it minimal: 2-3% scale change maximum.

2. Anticipation

Before expanding a card to detail view, briefly scale down (0.98) for 50ms, then expand. Prepares user for the transformation.

3. Staging

The card being interacted with should lift above others via z-index and shadow. Dim or blur background cards to focus attention.

4. Straight Ahead & Pose to Pose

Define clear states: resting, hovered, selected, expanded. Pose-to-pose transitions between these defined keyframes.