Product media placeholder
Replace this area with a screenshot or short walkthrough video during the media sweep.
Boundary node: writes one or more float values to CSS properties on a target DOM element. Pick which properties to expose via the picker — each becomes an input port wired from upstream tweens / latches / math.
Type domPoseWriteCategory boundaryContext sharedDynamic ports yesCompound no
Inputs
| Port | Type | Description |
|---|---|---|
selector | string | F357 — wireable selector. When connected (e.g. from `splitText.pieceSelector`), the wired value overrides the `CSS Selector` param at bind time. Unwired = the param value is used. |
Outputs
| Port | Type | Description |
|---|---|---|
| - | - | No ports declared. |
Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
selector | elementSelector | "" | CSS selector for the target element. Examples: ".hero", "#card-1", ".flair". Inside a forEach template, set this to `{ "fromScope": "selector" }` to bind to the per-iteration matched element. Multiple matches: only the first is written (use forEach for per-element fan-out). |
properties | domPoseProperties | {} | Picker for which CSS properties this node writes. Each enabled property becomes an input port + a CSS unit setting (px, %, deg, none). Transform properties (translate*, scale*, rotate*, skew*) batch through the accumulator; everything else writes via DOMBatcher. |
Use cases
- Apply a tween to an element — wire `tween.value` into one of the inputs (e.g. `translateX`, `opacity`) and set the CSS selector to the target.
- Combine multi-axis animations on one element — expose multiple inputs (translateX + translateY + scale + opacity) and wire each from its own tween / latch / math node.
- Per-element drivers — pair with a `forEach` instance using `{ "fromScope": "selector" }` for the per-iteration target to write per-instance poses (cursor trail, image trail, grid stagger).
Envelope
Use domPoseWrite 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-boundary/