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.