Modules · Interface

Animate

A reactive value that changes over time on its own. Animate hands you a value that is readable straight away and then eases towards its target, one animation frame at a time. A driver ticks it each frame, so anything bound to it - text, a style, a Graphics attribute - updates automatically as it moves, with no timers or loops to manage yourself. Use it to drive transitions, progress, eased numbers and the like.

Contents

Functions

Functions

Animate.Real

A number that starts at from, is readable at once, and animates smoothly to to over durationMs milliseconds.

Parameters

NameTypeDescription
fromnumberThe starting value; the animation is readable at this value immediately.
tonumberThe target value it eases towards.
durationMsnumberHow long the move takes, in milliseconds.

Returns

A reactive Maths.Real that updates each frame as it moves from from to to.

Example

const progress = Animate.Real(0, 1, 400);
Content.Text(progress);
A value that eases from 0 to 1 over 400ms