Stagger is the time offset between members of a group that share the same motion. Instead of every label, letter or card arriving on the same frame, each one starts a little later than the one before, so the group reads as a sequence rather than a single hit.
What it looks like
Picture four feature labels on a product card. With no stagger they fade up together and feel like one block. With a short stagger the first label arrives, then the second, then the third, then the fourth — the same ease or spring on each member, shifted in time. Letters rising one by one or chips popping into a logo lockup are the same idea on a different unit.
The two numbers that matter are how many members and how far apart they start. A uniform stagger finishes when the last member finishes:
groupEnd = start + (itemCount - 1) × stagger + memberDuration
Nine words that fade for eight frames, two frames apart, starting at frame 176, finish at frame 200 — not halfway through the cascade. The next event that needs that reading position has to wait for that last member, not for the first.
When to use it, and when not to
Stagger earns its place when the viewer should read the members in order. Studio's staging rules say to choose it by logical grouping and reading order: a card and its contents can still enter as one unit, and simultaneous entries are fine for one object or a coordinated event. A long cascade should earn its screen time through the information it reveals, not through motion alone.
Use it when:
- A list has a reading order. Feature labels, checklist rows, caption words that build a sentence.
- Cause or containment is being shown. Chips that assemble a lockup, bars that fill a chart, lines that reveal a code block.
- One shared motion needs rhythm. The same ease or spring on every member, offset so the group has a pulse instead of a slam.
Avoid it, or keep it short, when:
- The cascade becomes waiting. More members or a larger gap turns "sequence" into dead air before the next scene can start.
- The next phrase needs the same slot. The classic failure from Studio's anti-patterns: the following line starts while the previous group's last children are still exiting, because the plan used the first child's end instead of the full member schedule. Derive the next start from group completion, then inspect both sides of that boundary.
- Everything on screen is staggered. Concurrent cascades compete for attention; let finished content rest.
After you change copy, item count, stagger or duration, recompute group completion and every dependent event.
How to ask for it in Remocn Studio
Stagger the four feature labels, finish before the next scene.
Name the group, the order and the deadline: "bring the checklist in top to bottom, two frames apart", "letters rise one by one, hold the full line before exit", "exit the chips in the same order they entered so the next title can take the slot". If you want them together, say so: "all four cards land as one unit, no stagger".
In Studio's movement vocabulary, entry and exit behaviours are expected to expose stagger alongside direction, duration, delay and easing. When a component declares it, Inspect can show it as an editable number. Prefer letting the agent own the stagger from the brief; tune it only when the cascade feels rushed or idle.
Ready-made components
Stagger is a scheduling idea more than a single block, but remocn ships several components built around it:
- Staggered Fade Up: words slide up and fade in as a wave.
- Bottom-Up Letters: letters rise from below in a staircase, one symbol at a time.
- Logo Enter: brand chips that spring in one by one, then hold.
- Spring Settle: a scene transition whose incoming items land staggered on a stiff spring.
Related terms
Easing shapes each member's curve; spring animation is the physical alternative that Spring Settle and Logo Enter use on each staggered item. Kinetic typography often relies on stagger across words or letters — that entry is being written.