Product media placeholder
Replace this area with a screenshot or short walkthrough video during the media sweep.
Per-clone phase shift of a shared 0..1 progress signal. Computes `(progress + index/count) % 1`, wrapping the result into [0, 1) so it can drive any node that consumes a normalized progress (staggerWrite, multiKeyframe, propertyAnimation). Replaces the inline `((node('progress') + (node('index') / node('count'))) % 1)` expression that recurs in any forEach-instanced template that needs each clone to ride a different phase of one shared clock.
Type phaseShiftCategory mathContext sharedDynamic ports noCompound no
Inputs
| Port | Type | Description |
|---|---|---|
progress | float | Shared 0..1 driver. Wire from a `timeline.progress`, `scrollTrigger.progress`, or any normalized signal that all clones should ride. |
index | float | This clone's slot. In a forEach-instanced template, set `params.index: { "fromScope": "index" }` — the F374 expander resolves it to 0..count-1 per clone. |
count | float | Total number of slots. Wire from a sibling `domQuerySize` so the divisor tracks the live DOM (changing the HTML element count auto-rescales every clone's phase). |
Outputs
| Port | Type | Description |
|---|---|---|
value | float | Phase-shifted progress, wrapped into [0, 1). Same shape and units as the input progress — wire into the same downstream consumer types you would the raw shared timeline. |
Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
index | float | 0 | Unwired baseline for the index input. Templates typically pass `{ "fromScope": "index" }` here so each clone gets a different value; standalone authoring can set a literal slot. |
count | float | 1 | Unwired baseline for the count input. Wire from a sibling `domQuerySize.count` for DOM-driven scaling. |
Use cases
- Rolling text tubes — N stacked text lines splitting one shared timeline into N evenly-distributed phases (see `tube-text` demo).
- Carousels / marquees — one global cycle drives N phase-locked items; index of each item determines its slot.
- Parallax / layered animation — same scroll progress fans out into N depth-shifted clones with custom 1/N spacing.
Envelope
Use phaseShift 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-math/