Product media placeholder
Replace this area with a screenshot or short walkthrough video during the media sweep.
Docks a source element onto the Nth child of a list, where N is derived from a 0..1 progress input. As progress advances from 0 → 1, the source jumps from child[0] → child[1] → … → child[count-1] in lockstep with `floor(progress × count)`. The dock measures children's `getBoundingClientRect()` at runtime and parks the source at the most-recently-revealed child's right edge (whitespace children are skipped automatically so cursor-style consumers don't freeze across word breaks). Authors route the computed `offsetX` to any horizontal-offset-driven CSS property via `channels` (default: `translateX` in px). Compound: expands at load time to `domIndexedDock + domPoseWrite` — no runtime class.
Type indexedDockAnimationCategory animationContext sharedDynamic ports noCompound yes
Inputs
| Port | Type | Description |
|---|---|---|
progress | float | Drives WHICH child the source docks onto. Target index = `floor(progress × count)`. Wire from any 0..1 source — `scrollTrigger.progress`, a `pulseTween`, or a hand-built ramp. Stays at child[0] for progress=0 (left-edge anchor before first reveal), parks at child[count-1].right for progress=1. |
Outputs
| Port | Type | Description |
|---|---|---|
| - | - | No ports declared. |
Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
sourceSelector | elementSelector | "" | CSS selector for the element being moved. Most use cases match a single element (e.g. `.cursor`, `.tab-underline`, `.focus-ring`). The graph reads its current position and applies a translate that lands it on the active child. |
childSelector | elementSelector | "" | CSS selector matching the indexed children, in document / reading order. For typewriter chars, set to `.text-target .ft-split-char` (the spans `splitText` creates). For tab pills, `.tab-bar > .tab`. The graph picks `floor(progress × count)`-th match each frame. |
channels | indexedDockChannels | {"translateX":{"from":"offsetX","propertyName":"translateX","cssUnit":"px"}} | How the computed `offsetX` maps to CSS. Default routes to `translateX (px)`. Authors can swap to `marginLeft`, a CSS custom var, mask-position, or any horizontal-offset-driven property. |
Use cases
- Typewriter cursor — pair with `textStaggerAnimation { discrete: true }` so each char instant-flips on; cursor parks on the just-typed char's right edge as scroll progresses (see `text-effects/typewriter` demo).
- Tab / pill underline — source = `.underline` element, children = `.tab` elements; underline slides between active tabs proportional to progress.
- Onboarding step indicator — focus ring jumps between step elements.
- Carousel page dot — active-dot pill snaps to whichever dot corresponds to current slide via `progress` from the carousel's `scrollTrigger`.
- Scanning highlight — a colored bar walks through items in a list as scroll advances (combine with a `pulseDelay` to slow the walk).
Envelope
Use indexedDockAnimation 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/