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.
- Anticipation
Before expanding a card to detail view, briefly scale down (0.98) for 50ms, then expand. Prepares user for the transformation.
- Staging
The card being interacted with should lift above others via z-index and shadow. Dim or blur background cards to focus attention.
- Straight Ahead & Pose to Pose
Define clear states: resting, hovered, selected, expanded. Pose-to-pose transitions between these defined keyframes.
- Follow Through & Overlapping Action
Card content (text, images, icons) should lag slightly behind card movement. Stagger by 20-40ms for natural feel.
- 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.
- Arcs
When cards reorder (drag-and-drop), they should follow curved paths, not straight lines. Add slight rotation during movement.
- Secondary Action
While card lifts (primary), shadow expands and blurs (secondary). Image inside can subtle zoom. Border can glow.
- Timing Hover lift: 200-250ms Selection: 150ms Expand to detail: 300-400ms Reorder/shuffle: 250-350ms Stagger between cards: 50-75ms
- Exaggeration
Hover shadows can extend 2-3x normal depth. Selected cards can lift 8-12px. Keep proportional to card size.
- Solid Drawing
Maintain consistent border-radius ratios when scaling. Shadows should always come from same light source. Preserve aspect ratios.
- 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