Progress

A transition has one input: progress, from 0 (state A) to 1 (state B).

change.progress(0);     // A
change.progress(0.5);   // halfway
change.progress(1);     // B
change.value;           // where it is now

progress() draws that frame immediately and stops any playback. You can seek in any order. Ordinary reversible routes reuse the same frames backward; Unit's opt-in directionalEase() is a documented exception.

PlayCopy Anchor Link

change.play();                     // 0 → 1
change.play({ duration: 1200 });   // slower
change.play({ from: 1, to: 0 });   // backward
change.play({ from: change.value }); // carry on from here

play() starts at 0 unless you say otherwise, and pause() stops on the current frame.

duration is per stage. A route with one stop has two stages, so { duration: 800 } takes 1600 ms.

Sequences count in statesCopy Anchor Link

For a sequence(), progress runs from 0 to the number of states minus one. 1.5 is halfway between the second and third state. Whole numbers always land exactly on a state you wrote.

States, legs and stagesCopy Anchor Link

For authored states [A, B, C], the two legs are A → B and B → C. A chart may insert intermediate states and rendered phases inside either leg; these do not add new integer positions to a sequence.

A pair controller's route stages split its 0..1 progress range equally. inspect() gives the actual compiled phase intervals inside that range. A semantic action can span several phases; neither the number of actions nor states.length is a phase count. If the two legs contain 2 and 3 serial route stages, play({ duration: 800 }) takes (2 + 3) × 800 = 4000 ms for the whole sequence. The midpoint of a leg is not necessarily half of its semantic operations.

play() returns its controller, so await change.play() does not wait for completion. Await transition() or sequence() to prepare a controller, then read value while playback runs. The scroll template drives progress externally and never assumes play() is a Promise.

Resize and clean upCopy Anchor Link

A transition follows its container's width on its own. Call resize() after a theme change, or resize({ height: 480 }) to change the height. Call destroy() when the chart leaves the page.