cue:fade(...) — fade or pulse an SVG element

Fades the opacity of the triggering SVG object (or a specified target) between two opacity values. Can be used for smooth fade-ins, fade-outs, or pulsing effects. The transition speed, easing, and timing can all be controlled.

Syntax

cue:fade(mode:<in|out|pulse|blink>, dur:<seconds>,
          from:<0–1>, to:<0–1>, ease:<easing>,
          time:<seconds>, delay:<seconds>, hold:<seconds>,
          target:<id>)

Arguments

Argument Description
mode type of fade: "in", "out", "pulse", or "blink"
dur duration of the fade in seconds
from starting opacity (0 = transparent, 1 = opaque)
to ending opacity
ease easing type (e.g. linear, easeInOutSine, etc.)
time start time offset in seconds (optional, for cue scheduling)
delay delay before fade starts (seconds)
hold time to hold at final opacity before reset or removal
target optional target element ID; if omitted, applies to the cue element itself
osc 1 streams the opacity to /oscilla/fade/<uid> (off by default)
oscaddr custom address, sent as /oscilla/<oscaddr>
uid identity used in the OSC address and for network sync (defaults to the element id)

Behavior

Examples

cue:fade(mode:in, dur:2, from:0, to:1)
cue:fade(mode:out, dur:3, ease:easeOutSine)
cue:fade(mode:pulse, dur:1.5, from:0.2, to:1)
cue:fade(mode:blink, dur:0.5, time:10)
cue:fade(mode:in, dur:2, from:0, to:1, target:circle1)
cue:fade(mode:pulse, dur:2, hold:5, target:obj_light)

Numbers from a signal

from:, to: and dur: accept a follow():

fade(uid:f1, mode:in, to: follow(fader.t), dur:0.5)

These are sampled, not followed. A fade is a one-shot ramp whose tween is built from from/to/dur the moment it fires, so the signal is read then and that reading is used — the same contract dur: already has on rotate(), scale() and color(). "Fade to wherever the fader is now" is the useful gesture; a fade chasing a moving target is not a fade.

A fade() also publishes opacity as it runs, so one fade can drive another thing entirely.

Demo project

See demo-fade: in/out, pulse and blink, fading a hidden target from a marker, delay, hold and easing.

http://localhost:8001/?project=demo-fade

Tip: use ← → or ↑ ↓ to navigate the docs