playbooks

home / skills / dylantarre / animation-principles / lists-grids

lists-grids skill

/skills/07-by-ui-element/lists-grids

This skill applies Disney's animation principles to lists and grids to create smooth, engaging ordering, filtering, and loading transitions.

npx playbooks add skill dylantarre/animation-principles --skill lists-grids

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

Files (1)
SKILL.md
2.7 KB
---
name: lists-grids
description: Use when animating lists, grids, tables, or collections of items to create smooth ordering, filtering, and loading states
---

# List & Grid Animation Principles

Apply Disney's 12 principles to lists and grids for smooth, organized motion.

## Principles Applied to Lists & Grids

### 1. Squash & Stretch
List items compress slightly when grabbed for reorder. Grid items can stretch when expanding to fill space on filter.

### 2. Anticipation
Before list reorders, items briefly compress. Before filter removes items, they can shrink slightly. Prepares for change.

### 3. Staging
Item being dragged lifts above others (z-index + shadow). Filtered results highlight while others fade. Guide eye to relevant items.

### 4. Straight Ahead & Pose to Pose
Define states: entering, resting, reordering, exiting. Use pose-to-pose for predictable, controllable list animations.

### 5. Follow Through & Overlapping Action
Stagger item entrance: first item leads, others follow (30-50ms delay). Content within items lags behind item container.

### 6. Ease In & Ease Out
Item enter: `ease-out`. Item exit: `ease-in`. Reorder: `ease-in-out`. Stagger easing should feel like a wave, not mechanical.

### 7. Arcs
Reordering items should follow curved paths, not straight lines. Adds personality and organic feel to grid shuffles.

### 8. Secondary Action
While item moves (primary), placeholder appears (secondary), other items shift (tertiary). Coordinate the ensemble.

### 9. Timing
- Stagger delay: 30-75ms per item
- Item enter: 200-300ms
- Item exit: 150-200ms
- Reorder: 250-350ms
- Filter shuffle: 300-400ms
- Max total stagger: 500-800ms

### 10. Exaggeration
Dramatic filter transitions can scale items to 0 before removing. New items can overshoot position slightly. Make sorting visible.

### 11. Solid Drawing
Maintain consistent spacing during animations. Grid gaps should stay uniform. Item proportions should remain stable during transforms.

### 12. Appeal
Smooth list animations feel premium. Jarring reorders feel broken. Staggered entrances guide attention naturally. Users notice quality.

## CSS Implementation

```css
.list-item {
  animation: itemEnter 250ms ease-out backwards;
}

.list-item:nth-child(1) { animation-delay: 0ms; }
.list-item:nth-child(2) { animation-delay: 50ms; }
.list-item:nth-child(3) { animation-delay: 100ms; }
/* continue pattern */

@keyframes itemEnter {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.grid-item {
  transition: transform 300ms ease-in-out,
              opacity 200ms ease-out;
}
```

## Key Properties
- `transform`: translate, scale
- `opacity`: enter/exit
- `animation-delay`: stagger
- `grid-template`: layout shifts
- `order`: reordering

Overview

This skill teaches how to animate lists, grids, tables, and collections using Disney’s 12 principles to create smooth, readable motion. It focuses on ordering, filtering, loading, and reordering states so interactions feel natural and high quality. Use it to add polish and reduce visual confusion when items change.

How this skill works

The skill maps each animation principle to common UI behaviors: enter, exit, reorder, filter, and loading. It prescribes timing, easing, staggering, and transforms (translate, scale, opacity) and shows how to coordinate primary and secondary actions for coherent ensemble motion. Practical CSS patterns and timing ranges help developers implement consistent, responsive transitions.

When to use it

  • Animating list reorders (drag-and-drop or programmatic sorting).
  • Filtering or searching collections where items enter/exit or shuffle.
  • Initial load or lazy-loading of long lists and grids.
  • Transitioning between grid and list layouts or changing item size.
  • Improving perceived performance and attention guidance in UIs.

Best practices

  • Define clear states (entering, resting, reordering, exiting) and animate between them with pose-to-pose transitions.
  • Use staggered delays (30–75ms) and max total stagger (500–800ms) to produce a natural wave without excessive latency.
  • Prefer ease-out for entrances, ease-in for exits, and ease-in-out for reorders to communicate momentum.
  • Keep spacing and proportions stable during transforms to avoid layout jitter; use placeholders during movement.
  • Apply subtle squash/stretch and arcs for personality, but avoid over-exaggeration that hinders legibility.
  • Coordinate secondary actions (shadows, placeholders, content lag) so ensemble motion reads as a single event.

Example use cases

  • A photo gallery that smoothly filters and reorders thumbnails when users apply tags.
  • A draggable task list where items lift, compress, and follow curved paths as they reorder.
  • A product grid that fades and scales items when switching categories to highlight results.
  • Infinite scroll load where new cards stagger into view with ease-out entrance.
  • A dashboard table where rows slide and fade during sorting and row removal.

FAQ

What timings and delays should I start with?

Begin with item enter 200–300ms, exit 150–200ms, reorder 250–350ms, stagger 30–50ms per item and cap total stagger at 500–800ms; tweak for context.

How do I avoid layout jumps during animations?

Reserve space with placeholders, keep grid gaps constant, and animate transforms rather than layout properties when possible.