Product media placeholder
Replace this area with a screenshot or short walkthrough video during the media sweep.
Emits `document.querySelectorAll(selector).length` as a first-class graph value. Use to eliminate hard-coded `N` literals scattered across `propertyAnimation` channel maxes, `expression` `* (N-1)` math, and `clickStateDispatcher.values[]` arrays — wire `count`/`countMinusOne` into them so adding a matched element auto-rescales the graph. Re-queries each evaluate; cost is one querySelectorAll per Scheduler tick (negligible). Throws on empty selector or absent DOM (faster-motion-runtime/SSR).
Type elementCountCategory inputsContext sharedDynamic ports noCompound no
Inputs
| Port | Type | Description |
|---|---|---|
| - | - | No ports declared. |
Outputs
| Port | Type | Description |
|---|---|---|
count | float | document.querySelectorAll(selector).length, as a uint. |
countMinusOne | float | max(0, count − 1). Convenience for `progress * (N − 1)` and even-spaced index math. |
Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
selector | string | "" | CSS selector to count matches for. Resolved against document.querySelectorAll. Examples: ".svc-states > .svc-state", ".tech-list-items .tech-item". |
Use cases
- Fan-out indexed scroll-driven activations: connect `countMinusOne` to a propertyAnimation channel's output max so `--svc-active` ramps 0..N-1 regardless of how many state elements exist in HTML.
- Drive `Math.round(node('p') * node('n'))` integer-state-index expressions so the round-mode flip points auto-scale.
- Replace per-state click thresholds with `progress / count` math in a remap, eliminating manually-typed `[0, 0.333, 0.667, 1.0]` arrays.
Related nodes
Envelope
Use elementCount 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/