Product media placeholder
Replace this area with a screenshot or short walkthrough video during the media sweep.
Animate one or more CSS properties on a target element, driven by scroll progress between two edges of a trigger element. Compound: expanded into `scrollTrigger + propertyAnimation` (which itself expands to `multiKeyframe + domPoseWrite`) — no runtime class. Use this in place of manually wiring `scrollTrigger.progress → tween → domPropertyWrite` for every property. Channels accept EITHER the terse `{from, to, cssUnit?, ease?}` shape (hand-authored / AI-generated) OR the standard `{cssUnit?, keyframes: [{time, value, ease?}]}` shape (FVE-edited) — both expand to the same runtime nodes.
Type scrollTweenCategory animationContext sharedDynamic ports noCompound yes
Inputs
| Port | Type | Description |
|---|---|---|
| - | - | No ports declared. |
Outputs
| Port | Type | Description |
|---|---|---|
| - | - | No ports declared. |
Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
selector | elementSelector | "" | CSS selector for the element whose scroll position drives the tween. The trigger window is determined by where this element's edges meet the viewport (per Scroll Edges below). Examples: `.hero`, `#chapter-1`, `.services-track`. |
target | elementSelector | "" | CSS selector for the element whose CSS properties are animated. Leave empty to animate the trigger element itself. Use a separate target when the trigger is a tall scroll-range wrapper and the moving element is inside it. |
startEdge | scrollEdges | "top bottom" | Visual two-marker picker for Start Edge (progress = 0) and End Edge (progress = 1). Drag markers to set viewport position; click element-edge lines to choose which edge of the trigger element is tracked. Optional `+= N vh / px / %` offset suffix shifts the marker by an absolute amount. |
channels | propertyAnimationChannels | {"opacity":{"cssUnit":"none","keyframes":[{"time":0,"value":0},{"time":1,"value":1}]}} | CSS properties to animate. Each channel = one CSS property + a keyframe list. Custom properties (`--name`) supported. The tween scrubs across the trigger window — keyframe `time` values are 0..1 progress through that window. Optional per-channel `template: "blur({value}px)"` wraps the float output into a CSS string so a single channel can drive complex CSS values like `filter`, `clip-path`, or `mask-image` end-to-end through the graph (the unit must be baked into the template — `cssUnit` and `template` are mutually exclusive). |
Use cases
- One-line scroll-driven property animations — pin a hero, fade a nav, scrub a parallax. Replaces the trio scrollTrigger + tween + domPropertyWrite for every animated property.
- Multi-channel scroll-tweens — a single node can drive translateY + opacity + scale on the same target across the same trigger window. Each channel carries its own from/to/ease/cssUnit.
- Coordinated reveal sections — `selector` is the section, `target` is the inner element, `startEdge: "top bottom"` / `endEdge: "top top"` runs the tween while the section enters the viewport.
Related nodes
Envelope
Use scrollTween 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/