Stagger Children
Wrapper that offsets delayInFrames per child for staggered entrances.
PrimitivePrimitives
stagger-children30fps · 960×540
Install
$ npx remotion-ui@latest add stagger-childrenClones each child and adds a cumulative delayInFrames based on index. Works with any primitive that accepts delayInFrames.
Installs `motion-wrapper` automatically. Each child should use an enter primitive.
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, 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}>
{items.map((item) => (
<SlideLeft key={item}><span>{item}</span></SlideLeft>
))}
</StaggerChildren>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| children* | ReactNode | - | Child elements to stagger in sequence. |
| staggerInFrames | number | 6 | Delay between each child in frames. |
| baseDelayInFrames | number | 0 | Initial delay before the first child animates. |