home / skills / dylantarre / animation-principles / cards-containers

cards-containers skill

safe

/skills/07-by-ui-element/cards-containers

This skill helps you apply Disney's card and container animation principles to create engaging, dimensional interfaces with smooth, natural transitions.

npx playbooks add skill dylantarre/animation-principles --skill cards-containers

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

2.5 KB

---
name: cards-containers
description: Use when animating cards, panels, tiles, or container elements to create depth and interactivity
---

# 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

```css
.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

Overview

This skill shows how to animate cards, panels, tiles, and container elements using Disney’s 12 principles of animation to create depth and interactivity. It delivers practical rules, timing, and CSS patterns to make interfaces feel physical, responsive, and trustworthy. The guidance is intentionally minimal and implementable, focused on small, performant changes that scale across UI components.

How this skill works

The skill maps each animation principle to card/container behaviors: lift, selection, expansion, reordering, and content follow-through. It prescribes key properties (transform, box-shadow, z-index, filter, opacity), timing windows, and stagger patterns so motion feels natural and readable. Example CSS snippets and concrete timing values make it easy to apply consistent animation across an app.

When to use it

Hover, lift, and focus states for cards and tiles in lists or grids.
Expanding a card to a detail or modal view with anticipation and easing.
Drag-and-drop reorder where items need curved, readable motion paths.
Micro-interactions inside a card (image zoom, icon bounce) as secondary actions.
Staggered list animations on load or filter changes to add depth and rhythm.

Best practices

Keep scale changes subtle (2–3%) to avoid layout shift and preserve legibility.
Define clear states (rest, hover, selected, expanded) and animate between keyframes.
Use ease-in/ease-out or cubic-bezier easing; avoid linear motion for natural feel.
Stagger content elements by 20–40ms so text and images lag behind the container.
Maintain consistent light source, aspect ratios, and border-radius proportions when scaling.

Example use cases

A product grid where hovering a card lifts it, increases shadow, and slightly zooms the image.
Card expansion: brief scale-down (0.98 for ~50ms) as anticipation, then expand to detail over 300–400ms.
Drag-and-drop reordering where cards follow curved paths with slight rotation and 250–350ms timing.
On list load, stagger cards by 50–75ms to create an appealing entrance rhythm.
Selected state: lift 8–12px with 2–3x shadow depth to emphasize the active card.

FAQ

How large should scale or shadow changes be?

Keep scale changes to about 2–3% for hover and minimal layout impact; lift by 8–12px for selection and expand shadow up to 2–3x normal depth, proportional to card size.

Which timing and easing should I use?

Use 150–400ms depending on action: 200–250ms for hover, 300–400ms for expand. Prefer ease-in/out or cubic-bezier(0.25,0.1,0.25,1) for smooth motion.