Stagger Children
Offset children onto their own sequences — forward, reverse, centre or edge order, in and out.
PrimitivePrimitives
stagger-children30fps · 960×540
Install
$ npx remotion-ui@latest add stagger-childrenWraps each child in a <Sequence layout="none"> on its own slot, so every child animates from its local frame 0 and needs no delay of its own.
order changes which child goes first: center runs outwards from the middle, edges runs inwards — both read as one gesture across a row rather than a queue. exitStaggerInFrames moves each child's exit earlier in the order it arrived, without cutting its slot short, so nothing unmounts under the layout.
Each child gets a Sequence with layout="none", so it animates from its own frame 0. Inside a bounded window the slot carries an end too, which is what times each child's exit.
Agent notes
Install first, then import the copied source component locally. AI guide →
Import
@/remotion/primitives/stagger-children- Use when: frame-level motion primitives and reusable animation wrappers.
- Customize: staggerInFrames, baseDelayInFrames, order, exitStaggerInFrames, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
Example
import { StaggerChildren } from "@/remotion/primitives/stagger-children";
import { SlideLeft } from "@/remotion/primitives/slide-left";
<StaggerChildren staggerInFrames={8} exitStaggerInFrames={6}>
{items.map((item) => (
<SlideLeft key={item} exit><span>{item}</span></SlideLeft>
))}
</StaggerChildren>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| children* | ReactNode | - | Child elements to stagger in sequence. |
| staggerInFrames | number | 8 | Frames between one child starting and the next. |
| baseDelayInFrames | number | 0 | Frames before the first child starts. |
| order | "forward" | "reverse" | "center" | "edges" | "forward" | Which child goes first. center runs outwards from the middle, edges runs inwards. |
| exitStaggerInFrames | number | 0 | Frames between one child leaving and the next, in the order they arrived. 0 lands the group together. |