Product media placeholder
Replace this area with a screenshot or short walkthrough video during the media sweep.
Write a float value to a single CSS property, transform component, data-attribute, scrollTop/scrollLeft, or textContent on a DOM element. Single-property sibling of `domPoseWrite` — use this when you need to drive ONE value (CSS variable, opacity, scrollTop, etc.); use `domPoseWrite` when you need a batched transform pose (translate / scale / rotate / skew). Custom properties (CSS variables like `--bento-col`) work — pass the full `--name` as the Property field; the runtime calls `el.style.setProperty(name, value + unit)`.
Type domPropertyWriteCategory boundaryContext domDynamic ports noCompound no
Inputs
| Port | Type | Description |
|---|---|---|
value | float | Numeric value to write. Combined with the Unit (e.g. value=42 + unit=px → "42px") and assigned to the named property on the resolved element. For textContent mode, written verbatim (or formatted via the optional template). |
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 element this node writes to. Same picker as domPoseWrite. Multiple matches: only the first is written (use a forEach instance with `{ "fromScope": "selector" }` for per-element fan-out). |
propertyName | cssProperty | "opacity" | Property name. CSS properties (camelCase or kebab-case both accepted): `opacity`, `borderRadius`, `backgroundPositionX`. Transform components: `translateX` / `scaleY` / `rotate` etc. — these batch through the transform accumulator. CSS custom properties: pass `--name` verbatim (e.g. `--bento-col`). Special: `textContent` writes element text; `data-foo` writes the attribute; `scrollTop` / `scrollLeft` write the scroll position. |
cssUnit | enum | "none" | Unit suffix appended to the value when writing CSS. Use `none` for unitless properties (opacity, scaleX, custom-property numbers consumed via calc). Use `px` for translate / size / borderRadius. Use `deg` / `rad` for rotation / skew. Use `vw` / `vh` / `%` / `em` / `rem` for layout-relative writes (e.g. driving CSS variables that calc() against viewport). options none, px, %, deg, rad, em, rem, vw, vh |
template | string | "" | Optional format template — `{value}` is substituted with the input value at write time. Bypasses Unit when set. Use for properties that need wrapper syntax: `circle({value}% at 50% 50%)` for clipPath, `polygon(... {value}% ...)` for gradients, etc. Leave empty for plain numeric writes. |
Use cases
- CSS-variable driven layouts — animate `--bento-col` / `--accent-hue` / `--gradient-stop` and have CSS recompute the rest of the layout via `calc()` / `color-mix()`. Lets the graph stay tiny by offloading geometry to the cascade.
- One-off non-transform property writes — `opacity`, `borderRadius`, `filter` strength, `scrollTop` (for scroll-jacked elements), single data-attributes that the rest of the page reads.
- Texts that update with a number — wire a `counter` output into `textContent` mode for animated number displays without a separate counter writer.
Related nodes
- DOM Pose Write
- Property Animation
- Scroll Tween
- Event Tween
- Clip Path Animation
- Stagger Animation
- Counter Animation
- Attribute Write
Envelope
Use domPropertyWrite 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/