What is a staggered animation, and how do you choreograph cohesive motion for lists and cards?

Short answer

It is a small, sequential delay (often 20–50 ms) between items appearing in a list, creating a natural visual flow that guides the user's eye without simultaneous visual clutter.

Explanation

If 20 cards suddenly appear at the same time, the eye cannot focus on a starting point. With staggering, the first card appears and the second follows a fraction of a second later, guiding attention from the top of the page to the bottom according to reading direction. The total time for all list items to appear should not exceed 400ms to avoid boredom.

Common mistakes

• Setting a long delay (100ms per item), making a 10-item list take more than a second to appear.
• Using random staggered motion in conflicting directions, confusing the natural reading path.

Follow-up questions

• What is the functional purpose of motion design in user experience, and when does it become annoying?

Sources

• Material Design — Choreographing Motion