{"course":{"slug":"motion-and-audio","title":"Motion, Sound and Music","url":"https://addaly.com/learn/motion-and-audio","level":"intermediate","track":"create"},"lesson":{"slug":"stagger-and-orchestration","title":"Staggering without making people wait","url":"https://addaly.com/learn/motion-and-audio/stagger-and-orchestration","position":13,"of":72,"minutes":9,"answer":"A stagger works by overlapping heavily (20 to 60ms of offset per item with a capped total window) and starting the next element when the previous is roughly halfway.","keyIdea":"A stagger works by overlapping heavily (20 to 60ms of offset per item with a capped total window) and starting the next element when the previous is roughly halfway, because the eye reads intent long before a movement settles."},"body":{"format":"markdown","text":"## One thing at a time, but not one after the other\n\nA list of eight cards appearing. The naive implementation animates all eight identically at the same instant, which reads as a single block appearing: you have gained nothing over showing them instantly. The over-corrected implementation animates them one at a time, each waiting for the last to finish, and eight cards at 300ms each takes 2.4 seconds, which is an eternity.\n\nThe technique in between is the stagger: each item starts a fixed offset after the previous one, and they overlap heavily.\n\n## The numbers\n\n- **20 to 60ms of offset per item** is the useful range for interface work. Below about 15ms the eye cannot separate them and it reads as simultaneous. Above about 80ms it reads as a queue and the last item feels late.\n- **Cap the total.** With a 40ms stagger, twenty items means the last one starts 760ms after the first: too slow. The fixes are either a maximum total stagger window (divide the window by the item count) or a cap on how many items stagger at all, with the rest appearing together.\n- **Only stagger what is visible.** Staggering items below the fold wastes the budget on things nobody is looking at, and on a long list it can mean animating hundreds of elements.\n\nIn CSS this is usually a custom property set per item:\n\n```css\n.card { animation: rise 260ms var(--ease-enter) both;\n        animation-delay: calc(var(--i) * 40ms); }\n```\n\nwith `--i` set inline from the index. In the Web Animations API it is a `delay` per element; in GSAP and Motion it is a `stagger` option that does the same arithmetic.\n\n## Direction carries meaning\n\nA stagger has an order, and the order is a statement.\n\n- **Top to bottom** for a list: matches reading order, feels like the content filling in.\n- **From the point of interaction** outward: a menu opening from the button it belongs to, items nearest the button first. This reinforces the causal link.\n- **Reverse on exit.** If items entered top-first, they should leave bottom-first, so the exit is not a replay of the entrance. Most libraries let you reverse the stagger direction with one flag, and almost nobody does it.\n- **Never random.** A randomised stagger reads as broken rather than organic, because the eye is looking for the pattern and cannot find one.\n\n## Overlap, not sequence\n\nFor a compound transition (a sheet rising while its header fades in while its content slides up) the amateur version runs these in series and takes 900ms. The professional version overlaps them so the whole thing takes 400ms and still reads as three distinct events.\n\nThe rule that works: start the next element when the previous one is about 40 to 60 per cent through, not when it finishes. The eye has already registered the first movement's direction and intent by then; waiting for the settle adds time and communicates nothing.\n\nThis is easier to reason about with a timeline than with delays. GSAP's timeline, Motion's sequence array, and After Effects' layer bar view are all the same idea: positions on a shared clock rather than numbers added up in your head. Once you have more than three overlapping elements, delay arithmetic becomes unmaintainable: change one duration and every downstream number is wrong.\n\n## One focal point\n\nThe strongest constraint in orchestration is attention: people can attend to one moving thing. If four elements move in four directions at once, the viewer picks one and misses the rest.\n\nSo decide what the transition is *about*. If a dialogue opens, the dialogue is the event; the background dimming is support and should be slower, smaller and less contrasty. If a card expands into a page, the card is the event and everything else should cross-fade. When everything is animated with equal energy, nothing is emphasised: the same failure as a document where every word is bold.\n\n## When staggering is wrong\n\n- **A list the user already knows.** Returning to a list you have seen a hundred times and watching it assemble itself is friction, not delight. Consider staggering only on first load.\n- **Anything the user is about to interact with quickly.** If the third item is the one they always tap, a 120ms delay before it is tappable is a cost with no benefit. Make items interactive immediately even while animating.\n- **Search results.** People scan these fast. Staggering delays the scan.\n- **Under reduced motion.** Collapse the stagger to zero and cross-fade the set.\n\n## The free path\n\n- **GSAP**: free for all use now, and its `stagger` object handles grids, distance-from-a-point ordering and reverse.\n- **Motion**: open source, `staggerChildren` and `delayChildren` on a parent variant.\n- **Plain CSS**: an index custom property and `calc()` covers most of it with no dependency at all.\n- **Blender**, for non-web work, has an offset-per-object approach through drivers or the NLA editor, free.\n\n## The limitation\n\nStagger is the effect most likely to be praised in a portfolio and disliked in daily use. It photographs well and it tests badly, because a reviewer watches it once and a user meets it forty times a day. The honest position is that it belongs in moments that happen rarely (a first load, an empty state filling, a result arriving after work) and does not belong in the paths people repeat. Very few teams measure this, and most ship the same stagger everywhere because it looked good in the review."},"check":{"question":"A list of 24 cards uses a 60ms stagger. Reviewers like it; users call the screen slow. What is the mechanism behind the complaint?","options":[{"text":"Each card's own animation is being lengthened by the delay, so the twenty-fourth card animates over a much longer duration than the first.","correct":false,"tempting":"Confuses delay with duration; a delay postpones the start and leaves the animation's own length unchanged."},{"text":"Twenty-four items at 60ms means the last card starts nearly 1.4 seconds after the first, which is past the limit for uninterrupted attention, and reviewers watch once while users meet it repeatedly.","correct":true},{"text":"The stagger is running on the main thread rather than the compositor, so with 24 simultaneous animations the browser cannot maintain the frame budget.","correct":false,"tempting":"Reaches for a rendering explanation; staggered delays on transform and opacity are compositor work and 24 of them are not a load problem."},{"text":"The cards are being revealed in reading order from the top rather than outward from the point the user tapped, and any ordering other than outward-from-the-tap is read as arbitrary by the viewer and therefore reported as slowness.","correct":false,"tempting":"Overstates a real guideline: top-to-bottom is correct for a list, and ordering does not create a duration complaint."}]},"prev":{"slug":"transition-as-explanation","title":"The transition is the explanation","url":"https://addaly.com/learn/motion-and-audio/transition-as-explanation"},"next":{"slug":"lower-thirds-that-work","title":"Why your lower-third looks like a template","url":"https://addaly.com/learn/motion-and-audio/lower-thirds-that-work"},"authorship":"Founder and series editor: Dr Mustafa Mun. Written by AI models to a written standard. Exam keys checked blind by a second model: 3,665 of 3,666 agreed. Academic review invited.","review":{"status":"Draft, open for academic review"},"cite":"Addaly (2026) 'Staggering without making people wait', in Motion, Sound and Music. Edited by M. Mun. Addaly. Available at: https://addaly.com/learn/motion-and-audio/stagger-and-orchestration (Accessed: 13 October 2026).","licence":{"name":"CC BY-NC-SA 4.0","url":"https://creativecommons.org/licenses/by-nc-sa/4.0/"},"reader":{"schema":1,"title":"Staggering without making people wait","courseTitle":"Motion, Sound and Music","module":{"index":2,"slug":"motion-that-carries-meaning","title":"Motion that carries meaning"},"answer":null,"keyIdea":"A stagger works by overlapping heavily (20 to 60ms of offset per item with a capped total window) and starting the next element when the previous is roughly halfway, because the eye reads intent long before a movement settles.","hero":{"kind":"plate","image":null,"alt":null,"caption":null},"blocks":[{"t":"h2","id":"one-thing-at-a-time-but-not-one-after-the-other","runs":[{"text":"One thing at a time, but not one after the other"}]},{"t":"p","runs":[{"text":"A list of eight cards appearing. The naive implementation animates all eight identically at the same instant, which reads as a single block appearing: you have gained nothing over showing them instantly. The over-corrected implementation animates them one at a time, each waiting for the last to finish, and eight cards at 300ms each takes 2.4 seconds, which is an eternity."}]},{"t":"p","runs":[{"text":"The technique in between is the stagger: each item starts a fixed offset after the previous one, and they overlap heavily."}]},{"t":"h2","id":"the-numbers","runs":[{"text":"The numbers"}]},{"t":"ul","items":[[{"text":"20 to 60ms of offset per item","b":true},{"text":" is the useful range for interface work. Below about 15ms the eye cannot separate them and it reads as simultaneous. Above about 80ms it reads as a queue and the last item feels late."}],[{"text":"Cap the total.","b":true},{"text":" With a 40ms stagger, twenty items means the last one starts 760ms after the first: too slow. The fixes are either a maximum total stagger window (divide the window by the item count) or a cap on how many items stagger at all, with the rest appearing together."}],[{"text":"Only stagger what is visible.","b":true},{"text":" Staggering items below the fold wastes the budget on things nobody is looking at, and on a long list it can mean animating hundreds of elements."}]]},{"t":"p","runs":[{"text":"In CSS this is usually a custom property set per item:"}]},{"t":"code","lang":"css","label":"CSS","text":".card { animation: rise 260ms var(--ease-enter) both;\n        animation-delay: calc(var(--i) * 40ms); }"},{"t":"p","runs":[{"text":"with "},{"text":"--i","code":true},{"text":" set inline from the index. In the Web Animations API it is a "},{"text":"delay","code":true},{"text":" per element; in GSAP and Motion it is a "},{"text":"stagger","code":true},{"text":" option that does the same arithmetic."}]},{"t":"h2","id":"direction-carries-meaning","runs":[{"text":"Direction carries meaning"}]},{"t":"p","runs":[{"text":"A stagger has an order, and the order is a statement."}]},{"t":"ul","items":[[{"text":"Top to bottom","b":true},{"text":" for a list: matches reading order, feels like the content filling in."}],[{"text":"From the point of interaction","b":true},{"text":" outward: a menu opening from the button it belongs to, items nearest the button first. This reinforces the causal link."}],[{"text":"Reverse on exit.","b":true},{"text":" If items entered top-first, they should leave bottom-first, so the exit is not a replay of the entrance. Most libraries let you reverse the stagger direction with one flag, and almost nobody does it."}],[{"text":"Never random.","b":true},{"text":" A randomised stagger reads as broken rather than organic, because the eye is looking for the pattern and cannot find one."}]]},{"t":"h2","id":"overlap-not-sequence","runs":[{"text":"Overlap, not sequence"}]},{"t":"p","runs":[{"text":"For a compound transition (a sheet rising while its header fades in while its content slides up) the amateur version runs these in series and takes 900ms. The professional version overlaps them so the whole thing takes 400ms and still reads as three distinct events."}]},{"t":"p","runs":[{"text":"The rule that works: start the next element when the previous one is about 40 to 60 per cent through, not when it finishes. The eye has already registered the first movement’s direction and intent by then; waiting for the settle adds time and communicates nothing."}]},{"t":"p","runs":[{"text":"This is easier to reason about with a timeline than with delays. GSAP’s timeline, Motion’s sequence array, and After Effects’ layer bar view are all the same idea: positions on a shared clock rather than numbers added up in your head. Once you have more than three overlapping elements, delay arithmetic becomes unmaintainable: change one duration and every downstream number is wrong."}]},{"t":"h2","id":"one-focal-point","runs":[{"text":"One focal point"}]},{"t":"p","runs":[{"text":"The strongest constraint in orchestration is attention: people can attend to one moving thing. If four elements move in four directions at once, the viewer picks one and misses the rest."}]},{"t":"p","runs":[{"text":"So decide what the transition is "},{"text":"about","i":true},{"text":". If a dialogue opens, the dialogue is the event; the background dimming is support and should be slower, smaller and less contrasty. If a card expands into a page, the card is the event and everything else should cross-fade. When everything is animated with equal energy, nothing is emphasised: the same failure as a document where every word is bold."}]},{"t":"h2","id":"when-staggering-is-wrong","runs":[{"text":"When staggering is wrong"}]},{"t":"ul","items":[[{"text":"A list the user already knows.","b":true},{"text":" Returning to a list you have seen a hundred times and watching it assemble itself is friction, not delight. Consider staggering only on first load."}],[{"text":"Anything the user is about to interact with quickly.","b":true},{"text":" If the third item is the one they always tap, a 120ms delay before it is tappable is a cost with no benefit. Make items interactive immediately even while animating."}],[{"text":"Search results.","b":true},{"text":" People scan these fast. Staggering delays the scan."}],[{"text":"Under reduced motion.","b":true},{"text":" Collapse the stagger to zero and cross-fade the set."}]]},{"t":"h2","id":"the-free-path","runs":[{"text":"The free path"}],"role":"free"},{"t":"ul","items":[[{"text":"GSAP","b":true},{"text":": free for all use now, and its "},{"text":"stagger","code":true},{"text":" object handles grids, distance-from-a-point ordering and reverse."}],[{"text":"Motion","b":true},{"text":": open source, "},{"text":"staggerChildren","code":true},{"text":" and "},{"text":"delayChildren","code":true},{"text":" on a parent variant."}],[{"text":"Plain CSS","b":true},{"text":": an index custom property and "},{"text":"calc()","code":true},{"text":" covers most of it with no dependency at all."}],[{"text":"Blender","b":true},{"text":", for non-web work, has an offset-per-object approach through drivers or the NLA editor, free."}]]},{"t":"h2","id":"the-limitation","runs":[{"text":"The limitation"}],"role":"limit"},{"t":"p","runs":[{"text":"Stagger is the effect most likely to be praised in a portfolio and disliked in daily use. It photographs well and it tests badly, because a reviewer watches it once and a user meets it forty times a day. The honest position is that it belongs in moments that happen rarely (a first load, an empty state filling, a result arriving after work) and does not belong in the paths people repeat. Very few teams measure this, and most ship the same stagger everywhere because it looked good in the review."}]}],"check":{"question":[{"text":"A list of 24 cards uses a 60ms stagger. Reviewers like it; users call the screen slow. What is the mechanism behind the complaint?"}],"options":[{"text":[{"text":"Each card’s own animation is being lengthened by the delay, so the twenty-fourth card animates over a much longer duration than the first."}],"correct":false,"tempting":[{"text":"Confuses delay with duration; a delay postpones the start and leaves the animation’s own length unchanged."}]},{"text":[{"text":"Twenty-four items at 60ms means the last card starts nearly 1.4 seconds after the first, which is past the limit for uninterrupted attention, and reviewers watch once while users meet it repeatedly."}],"correct":true,"tempting":null},{"text":[{"text":"The stagger is running on the main thread rather than the compositor, so with 24 simultaneous animations the browser cannot maintain the frame budget."}],"correct":false,"tempting":[{"text":"Reaches for a rendering explanation; staggered delays on transform and opacity are compositor work and 24 of them are not a load problem."}]},{"text":[{"text":"The cards are being revealed in reading order from the top rather than outward from the point the user tapped, and any ordering other than outward-from-the-tap is read as arbitrary by the viewer and therefore reported as slowness."}],"correct":false,"tempting":[{"text":"Overstates a real guideline: top-to-bottom is correct for a list, and ordering does not create a duration complaint."}]}],"order":[2,0,3,1],"why":null},"prev":{"slug":"transition-as-explanation","title":"The transition is the explanation","minutes":10},"next":{"slug":"lower-thirds-that-work","title":"Why your lower-third looks like a template","minutes":10}}}