lists-grids

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

.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;
}