← all demos

Values that travel

A tween is a signal you can hand to a control like any other. The panel writes and shows where you put the value; your code reads where it currently is. Nothing needs wiring between the two.

Both readings

sketch.js
const position = tweened(0.25, 700, easings.cubicOut);

gui.addSlider("Position", position, 0, 1, 0.01);

position.set(1);      // the slider does this
position.target();    // 1 — where it is heading, what the panel shows
position();           // 0.31, 0.68, 0.94… — what you draw
Try: drag Position and watch the thumb arrive instantly while the dot takes its time — that is the panel reading .target() and the canvas reading the value. Pick backOut or elasticOut to see a curve leave the 0–1 band on the way. The two counters show why the split exists: one effect per change, or one per frame, depending on which reading it asked for.