Product media placeholder
Replace this area with a screenshot or short walkthrough video during the media sweep.
Damped-oscillation per-element writer — like plucking a guitar string with characters tied to it as beads. On each rising-edge `trigger`, every matched element traces its own damped sinusoid `A·e^(-decay·t)·sin(ω·t + i·phaseSpread)` where `i` is the element index. Adjacent elements oscillate slightly out of phase (controlled by `phaseSpread`), giving a "chord struck" feel — independent wiggle per char that stays loosely synchronised across the row. After `duration` seconds the node stops writing and chars return to rest. Use as a one-shot reaction to a hover/click pulse without any progress driver.
Type wiggleStringWriteCategory animationContext sharedDynamic ports noCompound no
Inputs
| Port | Type | Description |
|---|---|---|
trigger | float | Rising-edge trigger. Each 0→1 transition (re-)plucks the string from the current frame, replacing any previous oscillation. |
amplitudeInput | float | Optional dynamic amplitude override (px when property is translateX/Y, deg for rotate, etc.). Falls back to the `amplitude` param when wired value is NaN/zero. |
Outputs
| Port | Type | Description |
|---|---|---|
| - | - | No ports declared. |
Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
selector | elementSelector | "" | CSS selector for the chars/elements to wiggle. Each match becomes one bead on the string. |
property | cssProperty | "translateY" | CSS property to write. Transform components (translateX/Y, rotate, scaleX/Y) route through the transform accumulator and compose with other writers; non-transform props write directly to inline style. |
cssUnit | enum | "px" | Unit options px, %, rem, em, deg, rad, none |
amplitude | float | 16 | Initial peak displacement at t=0. step 1 |
frequency | float | 5 | Oscillation frequency in Hz. 5Hz = 5 cycles/sec, ~2.5 cycles in a 0.5s decay window. min 0.1; step 0.5 |
decay | float | 6 | Exponential decay rate. After t=3/decay seconds amplitude is ~5% of initial. Higher = snappier dampening. min 0.1; step 0.5 |
phaseSpread | float | 0.4 | Per-element phase offset in radians. 0 = all chars in perfect sync, 2π = neighbours one full cycle apart. Tune to taste — 0.3-0.5 gives the "tied to a string" loose-coupling look. step 0.05 |
duration | float | 1.2 | Hard cap after which the node stops writing and chars rest at 0. Should be ≥ 3/decay so the visible oscillation completes. min 0.1; step 0.1 |
Use cases
- Title hover wiggle — hover-rise pulse fires the chord; chars wiggle vertically with phase-spread for a guitar-string-struck feel.
- Cursor-over reaction — clickPulse on a button → wiggle the label chars with a small amplitude burst.
- Notification arrival — a one-shot pluck on each new toast, chars settle on their own.
Related nodes
Envelope
Use wiggleStringWrite 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/