cards-containers

Card & Container Animation Principles

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

Principles Applied to Cards

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

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

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

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

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

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.

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

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

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

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

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

Source Transparency