Product media placeholder
Replace this area with a screenshot or short walkthrough video during the media sweep.
Fan a single animation template across all DOM elements matching a plain CSS selector, with per-element stagger offsets. Element count is resolved at runtime via `querySelectorAll(selector)` — no template language, no `{i}` placeholder, no per-child graph nodes. Inner `each` is a propertyAnimation-shaped template (float / color / string keyframe channels); the runtime evaluates it per element with translation-stagger (each element's progress is shifted by `stagger * effectiveIndex(i)`). Compound: expands to ONE `staggerAnimate` runtime node.
Type staggerAnimationCategory textContext sharedDynamic ports noCompound yes
Inputs
| Port | Type | Description |
|---|---|---|
progress | float | Progress |
Outputs
| Port | Type | Description |
|---|---|---|
| - | - | No ports declared. |
Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
selector | elementSelector | "" | Plain CSS selector matching all the staggered elements — e.g. `.card`, `.tech-item`, `.dot`. The runtime resolves the element list via `querySelectorAll(selector)` at bind time and applies the inner template per element with stagger offsets. No `{i}` template language; no need to know the count up front. |
stagger | float | 0.05 | Per-element delay added to every keyframe time, expressed as a fraction of the input progress. Element i's effective keyframe times = source-template times + `effectiveIndex(i) * stagger`. **0** = all elements animate simultaneously. **1 / (N-1)** = first element peaks at progress 0, last element peaks at progress 1 when the template is centered. Common range: 0.05 – 0.3. min 0; max 1; step 0.01 |
staggerFrom | enum | "start" | **Start** = element 0 fires first, element N-1 last (left-to-right cascade). **End** = reversed (right-to-left). **Center** = middle elements fire first, edges last (outward fan). **Edges** = both ends fire first, middle last (inward collapse). **Random** = deterministic seeded permutation (same shuffle every reload). options start, end, center, edges, random |
delayOffset | float | 0 | Constant delay added to every element's effective keyframe time. Useful when items should enter from progress 0.2 onward (each lagging the previous by `stagger`) — set `delayOffset: 0.2` and the order pattern (start/center/edges) is preserved, just shifted right. min 0; max 1; step 0.01 |
each | staggerInnerTemplate | {"type":"propertyAnimation","params":{"channels":{"opacity":{"type":"float","cssUnit":"none","keyframes":[{"time":0,"value":0},{"time":1,"value":1}]}}}} | The keyframe template applied per element. Channels are the same shape as a propertyAnimation — float / color / string keyframes — but the runtime evaluates them per element with translation-stagger (per-element delay added to keyframe times, not the template compressed into a slot). Authoring tip: for "active item highlight" patterns (color crossfade, focus ring), author keyframes that span [-W, +W] with the peak at t=0 — element i's peak then naturally lands at progress = i * stagger. Out-of-range times are valid (the runtime holds the first/last keyframe value). |
Use cases
- Card-grid entrance — `selector: ".card"`, channels translateY 40px→0 + opacity 0→1, `stagger: 0.05`, `staggerFrom: start`.
- Dot indicator wave — `selector: ".dot"`, channel scale 1→1.2→1 with `staggerFrom: center`.
- Indexed color crossfade through a list — inner template authored as a triangle (e.g. keyframes at `[t: -W, t: 0, t: W]` for inactive→active→inactive); each child's peak naturally lands at progress = i/(N-1) via the per-element time-shift. Times outside [0, 1] are valid: the runtime holds the first/last keyframe value when progress is out of range, so children only animate while their window overlaps progress.
Related nodes
Envelope
Use staggerAnimation as the node type inside a graph node envelope. Add id, optional params, optional connections, and optional activeWhen based on the guide context.
Generated source
Registry faster-motion-docs/node-registry.jsonCategory page /help/faster-motion/faster-motion-node-category-text/