Product media placeholder
Replace this area with a screenshot or short walkthrough video during the media sweep.
Per-element scroll progress fan-out. Same edge math as `scrollTrigger`, but resolves N matched elements at bind time and emits `progress`/`isInView` as arrays — each element's progress is computed against ITS OWN viewport position. Pairs with `staggerAnimate.progressArray` for "fire each row when its row enters viewport" patterns where one shared scrolltrigger range can't represent the per-element timing. Use when DOM-order interleaves columns (CSS grid) or rows scroll past at distinctly different viewport positions, and where same-row vs different-row stagger ordering would otherwise force per-tile triggers.
Type scrollTriggerEachCategory inputsContext sharedDynamic ports noCompound no
Inputs
| Port | Type | Description |
|---|---|---|
| - | - | No ports declared. |
Outputs
| Port | Type | Description |
|---|---|---|
progress | floatArray | Per-element 0..1 clamped progress, in DOM order of matched elements. Wire into `staggerAnimate.progressArray` on the same selector. |
unclampedProgress | floatArray | Per-element raw progress (can go below 0 before range, above 1 after). Use when the consumer wants overshoot-aware values. |
isInView | floatArray | Per-element 0/1 gate — 1 when the element's rawProgress is within [0, 1]. |
count | float | Number of matched elements at bind time. Useful for downstream array-aware math (e.g. building a deterministic stagger schedule that auto-scales when authors add more rows). |
Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
selector | elementSelector | "" | Selector matching the elements to fan progress out across. Use the same selector that downstream `staggerAnimate` uses (or wire `pieceSelector` from a `splitText` upstream). |
startEdge | scrollEdges | "top bottom" | When each element's progress reaches 0. Same `<elementEdge> <viewportEdge>` syntax as `scrollTrigger` — e.g. `top bottom` (progress 0 the instant the element top crosses viewport bottom). |
endEdge | scrollEdges | "top 50%" | When each element's progress reaches 1. e.g. `top 50%` (progress 1 when element top reaches 50% of viewport from top). |
scroller | string | - | Optional custom scroll-container selector. Defaults to window. |
invert | bool | - | Output 1 → 0 instead of 0 → 1. |
Use cases
- Reveal-as-each-row-enters: wire `progress` (float[]) into `staggerAnimate.progressArray` on the same selector — each row fires its keyframe at ITS OWN viewport entry, no per-tile scrollTrigger duplication.
- Column-interleaved grids: `staggerWrite.staggerOrder: positionY` solves shared-progress visual ordering, but only when one shared scroll range works. When timing must follow per-element scroll (tall grids spanning multiple viewports), use this fan-out instead.
- Per-element parallax depth: drive a remap with each element's own progress so far-from-viewport-center elements lag closer-to-center elements naturally.
Related nodes
Envelope
Use scrollTriggerEach 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-inputs/