Stagger Delay Calculator
Plan a staggered animation and see the tail, plus why a delay that works on eight items adds two seconds on forty.
Each bar is one item, starting at its delay and running for one duration. Where the bars overlap vertically, that many items are moving at once. Nothing is uploaded.
A fixed delay stops working as the list grows
The whole sequence takes duration + (n − 1) × delay, which is linear in the count. A 50ms stagger on 8 cards adds 350ms and feels crisp. The same delay on 40 rows adds 1950ms, so the last one arrives nearly two seconds after the first.
| Items | Total at 50ms | Tail | Inside 600ms? | Delay that would fit |
|---|---|---|---|---|
| 4 | 450ms | 150ms | yes | 100.0ms |
| 8 | 650ms | 350ms | no | 42.9ms |
| 12 | 850ms | 550ms | no | 27.3ms |
| 20 | 1250ms | 950ms | no | 15.8ms |
| 30 | 1750ms | 1450ms | no | 10.3ms |
| 40 | 2250ms | 1950ms | no | 7.7ms |
| 60 | 3250ms | 2950ms | no | 5.1ms |
Holding a budget instead means the delay has to shrink as one over n − 1, exactly. To keep 40 items inside 600ms with a 300ms item duration the delay is 7.7ms — at which point neighbouring items are 97% overlapped and the stagger has quietly become a slightly soft fade. There is a real ceiling on how many things can be staggered visibly inside a fixed budget, and it is lower than it feels.
The overlap decides whether it reads as a wave or a queue
Overlap is 1 − delay/duration. Above zero the items are in flight together and it reads as one wave passing through a list. At exactly zero — delay equal to duration — precisely one item is moving at any moment. Below that there is dead air between them.
| Delay | Overlap | Items moving at once | Reads as |
|---|---|---|---|
| 10ms | 97% | 20 | a wave |
| 50ms | 83% | 6 | a wave |
| 150ms | 50% | 2 | a wave |
| 300ms | 0% | 1 | a queue |
| 450ms | -50% | 1 | a queue |
The boundary is not gradual. At delay = duration exactly one item moves at a time, and the character of the animation changes there rather than fading across a range. At the other end, a 10ms delay has all 20 items in the air together, which is not a stagger at all — it is a fade with a slight lean.
The schedule itself
Item i starts at i delays and runs for one duration — arithmetic all the way down, which is why the total is so predictable and why it grows so fast.
| Item | Starts | Finishes |
|---|---|---|
| 1 | 0ms | 300ms |
| 2 | 50ms | 350ms |
| 3 | 100ms | 400ms |
| 4 | 150ms | 450ms |
| 5 | 200ms | 500ms |
| 6 | 250ms | 550ms |
How to use
- Set how many items and how long each takes.
- Set the stagger delay between them.
- The timeline shows every item as a bar.
- Set a budget and it tells you the delay that fits.
Frequently asked questions
How long does a staggered animation take?
One item duration plus one delay for every item after the first, so duration plus n minus one times delay. That is linear in the count, which is why it grows faster than people expect: a 50ms stagger adds 350ms across eight cards and 1,950ms across forty.
What delay should I use?
It depends on how many items there are, which is the point. If you want to hold a total budget, the delay has to shrink as roughly one over the count. Keeping 40 items inside 600ms with a 300ms item duration allows only 7.7ms between them.
Can I stagger a long list at all?
Only by making the stagger nearly invisible. At 7.7ms between items with a 300ms duration, neighbours are 97 per cent overlapped, so what you have is a fade with a slight lean rather than a wave. There is a real ceiling on how many things can be staggered visibly inside a fixed budget.
What decides whether it looks like a wave?
The overlap, which is one minus the delay over the duration. Above zero the items are in flight together and it reads as one wave passing through the list. Below zero there is dead air between them and it reads as a queue being processed.
Where exactly is that boundary?
At delay equal to duration, and it is not gradual. At that point precisely one item is moving at any moment. A hair either side and you are in a different regime, so it is worth knowing where the line is rather than tuning by feel through it.
How many items move at once?
The duration divided by the delay, capped at the item count. A 300ms animation with a 50ms stagger has six in flight at any moment once the sequence is in full flow, which is what gives it the sense of a travelling wave.
Does this send anything anywhere?
No. Everything is computed in your browser, and nothing is uploaded.
🔒 This tool runs entirely in your browser. Nothing you enter is uploaded, logged, or stored.