Product media placeholder
Replace this area with a screenshot or short walkthrough video during the media sweep.
Dock a source DOM element onto a target DOM element, driven by a 0..1 progress input (0 = at rest, 1 = fully docked). Emits horizontal + vertical pixel offsets; authors route each offset to any CSS property via `channels`. Default maps offsetX → translateX(px) and offsetY → translateY(px) on the source element — override for axis-only docking, or to pipe the offset into marginLeft / mask-position / CSS custom vars / scale compensation, etc. Compound: expanded into `domDockTo + domPoseWrite` at load time — no runtime class.
Type dockToAnimationCategory animationContext sharedDynamic ports noCompound yes
Inputs
| Port | Type | Description |
|---|---|---|
progress | float | Progress |
Outputs
| Port | Type | Description |
|---|---|---|
| - | - | No ports declared. |
Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
sourceSelector | elementSelector | "" | Source Element |
targetSelector | elementSelector | "" | Target Element |
sourceAnchor | string | "center" | Source Anchor |
targetAnchor | string | "center" | Target Anchor |
channels | dockToChannels | {"translateX":{"from":"offsetX","propertyName":"translateX","cssUnit":"px"},"translateY":{"from":"offsetY","propertyName":"translateY","cssUnit":"px"}} | Channels |
Envelope
Use dockToAnimation 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-animation/