cards-containers

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.

5. Follow Through & Overlapping Action

Card content (text, images, icons) should lag slightly behind card movement. Stagger by 20-40ms for natural feel.

6. Ease In & Ease Out

Card lifts use ease-out, card settles use ease-in-out. Never linear. cubic-bezier(0.25, 0.1, 0.25, 1) for smooth lifts.

7. Arcs

When cards reorder (drag-and-drop), they should follow curved paths, not straight lines. Add slight rotation during movement.

8. Secondary Action

While card lifts (primary), shadow expands and blurs (secondary). Image inside can subtle zoom. Border can glow.

9. Timing

• Hover lift: 200-250ms
• Selection: 150ms
• Expand to detail: 300-400ms
• Reorder/shuffle: 250-350ms
• Stagger between cards: 50-75ms

10. Exaggeration

Hover shadows can extend 2-3x normal depth. Selected cards can lift 8-12px. Keep proportional to card size.

11. Solid Drawing

Maintain consistent border-radius ratios when scaling. Shadows should always come from same light source. Preserve aspect ratios.

12. Appeal

Rounded corners feel approachable, subtle shadows add premium feel. Smooth transitions build trust. Cards should feel like physical objects.

CSS Implementation

.card {
  transition: transform 250ms ease-out,
              box-shadow 250ms ease-out;
}

.card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}

.card-content {
  transition: transform 280ms ease-out; /* slight lag */
}

Key Properties

• transform: translateY, scale, rotate
• box-shadow: depth and lift
• z-index: layering
• filter: blur for background
• opacity: focus states