Product media placeholder
Replace this area with a screenshot or short walkthrough video during the media sweep.
F337 — animated scroll-to. Trigger-launched tween over the scroller's scrollTop. Resolves the target Y from a CSS selector (or "top" / "bottom") at trigger time, or from the dynamic `targetY` input port when wired (takes precedence over the selector). Lerps from current scroll through the configured ease, outputs a `value` to feed a domPropertyWrite(scrollTop). Pure-graph; no imperative API.
Type scrollToCategory animationContext sharedDynamic ports noCompound no
Inputs
| Port | Type | Description |
|---|---|---|
trigger | float | Rising-edge launches the tween. Wire from a click pulse (`eventListener.fired`, `clickStateDispatcher.pulse`), a `loadPulse`, or any other rising-edge source. Each rising edge restarts the tween from the current scrollY through the configured ease. |
targetY | float | Optional dynamic destination in document scroll-coords (px). When wired to a finite value, overrides Target Selector at trigger time. NaN (unwired) falls back to selector-based resolution. Use when the destination is graph-computed (e.g. `remap` over a pin-anchor's flowTop + scrollDistance for click-to-pin-progress patterns). |
Outputs
| Port | Type | Description |
|---|---|---|
value | float | Animated current scroll position the tween is producing (px). Wire into a `domPropertyWrite(scrollTop)` to drive the page. Stays at the last-tween-end value when idle so the downstream write dirty-checks to a no-op. |
progress | float | Tween progress 0..1 while animating, 0 when idle. Useful for chaining downstream "during scroll-to" effects (e.g. fade UI, dim overlay). |
isScrolling | float | 1 while the tween is animating, 0 when idle (before first trigger or after tween completes). Drive UI that should disable input or show a "scrolling…" indicator during programmatic scroll. |
Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
targetSelector | elementSelector | "" | CSS selector for the element to scroll to (resolved at trigger time so the value reflects current layout). Two reserved keywords: `top` (scrolls to 0) and `bottom` (scrolls to scrollHeight − viewportH). Leave empty when wiring a dynamic destination through the `targetY` input port instead — the port wins over this selector when finite. |
duration | float | 0.8 | Tween duration in seconds. The eased lerp runs from current scrollY at trigger time to the resolved target Y over this window. Default 0.8s. min 0; step 0.1 |
ease | easingCurve | "easeInOutCubic" | Easing curve applied to the [0..1] tween progress. Same vocabulary as tween / propertyAnimation — pick a preset (linear / power / cubic / back / elastic) or pass a parametric string like `cubic-bezier(0.4, 0, 0.2, 1)` / `back.out(1.4)`. Custom eases registered via F333 also work here. |
offsetY | float | 0 | Subtracted from the resolved target Y, in pixels. Use to compensate for a sticky header (e.g. `60` lands the target 60px below the viewport top) or to nudge the destination above/below the natural element edge. step 1 |
scroller | elementSelector | "" | CSS selector for the scrolling element. Empty = the document scroller (`<html>`). Set when scrolling inside an internally-scrolled panel (e.g. a side-pane with `overflow: auto`). The same selector controls where reads + writes go. |
Related nodes
Envelope
Use scrollTo 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/