Product media placeholder
Replace this area with a screenshot or short walkthrough video during the media sweep.
Stateless A→B interpolation with easing — pure function of `progress`.
Type tweenCategory animationContext sharedDynamic ports noCompound no
Inputs
| Port | Type | Description |
|---|---|---|
progress | float | Drive value 0..1. At 0, output = `From`; at 1, output = `To`. Wire from a timeline, scrollTrigger, or any normalized signal. |
from | float | Optional dynamic override of the `From` param. When wired, the tween starts at this incoming value instead of the static param. Use to vary the start per spawn (e.g. wire from a Latch holding the cursor X). |
to | float | Optional dynamic override of the `To` param. When wired, the tween ends at this incoming value instead of the static param. Use for per-spawn variety: wire `randomFloat` for random rotation / scale / fall distance. |
Outputs
| Port | Type | Description |
|---|---|---|
value | float | Interpolated value between `from` and `to`, shaped by `ease`. |
Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
from | float | 0 | Output value when `progress` = 0. Any number — units are whatever the consumer expects (px, deg, opacity 0..1, etc). Example: 0 for fade-in opacity, -100 for off-screen-left translate. |
to | float | 1 | Output value when `progress` = 1. Example: 1 for fully visible opacity, 200 for translate-200px-right, 360 for one full rotation in degrees. |
ease | easingCurve | "linear" | Easing curve shaping how `value` interpolates from `from` to `to`. Pick a preset (linear / power / elastic / back / bounce / cubic-bezier) — easings accept parameters via `name(arg1, arg2)` syntax. Example: "elastic.out(1, 0.3)", "back.in(0.4)", "power2.out". |
Use cases
- One-shot value animation — wire a `timeline` or `scrollTrigger` progress into a tween mapping `from→to` with an easing curve.
- Property remap — rescale a 0..1 input (`mouseVelocity.magnitude`, `scroll`) into a domain-specific range (e.g. -200..200 px) with a non-linear curve.
Related nodes
Envelope
Use tween 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/