Lemma
No. 089

UI Design

Stagger

Stagger is animating a group of items one after another with a small delay between each, rather than all at once. The items appear in quick succession, like a ripple.

Why it matters

Staggering turns a flat flash of content into a sense of arrival, which feels more polished and easier to follow. It also subtly guides the eye through a list in order.

In depth

The delay between items is the key dial: too short and the effect disappears, too long and the list feels slow to finish. Around 40 milliseconds per item is a good starting point, though longer lists need a smaller delay so the total time stays reasonable. The aim is a sense of things arriving in sequence, not a slideshow you have to wait through.

Real-world example

When a menu opens, its items fade in one by one with about 40 milliseconds between each, creating a gentle cascade rather than everything popping in at once.

Try it
Delay60ms
Back to index