Skip to content

Tween

Defined in: src/anim/tween.ts:37

A framework-agnostic, clock-driven scalar tween — the portable core of the animation system. It holds no timers and triggers no re-renders: instead it maps the real-time clock through an easing curve, so reading value always returns the right number for “now”. A driver (a widget’s render loop, a React effect, a Solid signal) decides when to read and re-render.

Because every read derives from the wall clock, frame jitter never accumulates drift — the value lands exactly on the target at the end of the duration regardless of how irregularly it was sampled.

Lifecycle:

  • to aims at a new target, tweening from the currently displayed value.
  • value reads the eased position at the present clock.
  • animating reports whether motion is still in flight, and fires onComplete exactly once as the tween settles.

new Tween(initial): Tween

Defined in: src/anim/tween.ts:46

number

Tween

get animating(): boolean

Defined in: src/anim/tween.ts:100

True while the tween is still moving. Reading this settles the tween and fires onComplete exactly once when the duration has elapsed, so a driver that loops while (tween.animating) gets the completion callback for free.

boolean


get goal(): number

Defined in: src/anim/tween.ts:83

The value this tween is moving toward.

number


get value(): number

Defined in: src/anim/tween.ts:88

The eased value at the present clock.

number

set(value): void

Defined in: src/anim/tween.ts:75

Jump straight to value with no motion, cancelling any tween in flight.

number

void


to(target, opts?): void

Defined in: src/anim/tween.ts:56

Aim at a new target, tweening from the value shown right now (so retargeting mid-flight is seamless). A no-op while already heading to the same target; a non-positive duration snaps immediately.

number

TweenOptions = {}

void