Animations

Vizzy's animation system uses async/await. Call play() to run animations and await the result. This gives you sequential flow with native JavaScript, no queues or schedulers.

Key concept

Shapes added with add() are visible immediately. If you want them to appear with an animation, skip the add(). Calling play(fadeIn(shape)) adds the shape to the scene automatically.

Fade In / Fade Out

The simplest way to make shapes appear and disappear:

Create (Draw-On)

create() progressively draws a shape's stroke, like a pen tracing it. Works best with shapes that have visible strokes:

Movement

Two ways to animate position:

• animateShift(shape, [dx, dy]): relative offset from current position
• animateMoveTo(shape, [x, y]): absolute destination

Rotation and Scale

• animateRotate(shape, angle): rotate by angle in radians
• animateScale(shape, factor): scale uniformly (1 = no change)

Color and Opacity

• animateColor(shape, { stroke?, fill? }): smooth color transition
• animateOpacity(shape, target): fade to a specific opacity (0-1)

Simultaneous vs Sequential

Simultaneous: pass multiple animations to a single play() call:

await play(fadeIn(a), fadeIn(b), fadeIn(c)); // all at once

Sequential: use separate await play() calls:

await play(fadeIn(a)); // first
await play(fadeIn(b)); // then
await play(fadeIn(c)); // then

Per-Frame Updates with during()

during(callback) runs a function every frame while other animations play. The callback receives the eased progress t (0 to 1). Use it for dynamic labels, computed positions, or anything that needs continuous updates:

Options

Pass an options object as the last argument to play():

Option	Default	Description
duration	1	Animation length in seconds
easing	smooth	Easing function

Available easing functions

• linear: constant speed
• easeInQuad, easeInCubic, easeInSine: starts slow, accelerates
• easeOutQuad, easeOutCubic, easeOutSine: starts fast, decelerates
• easeInOutQuad, easeInOutCubic, easeInOutSine: slow at both ends
• smooth: Hermite smoothstep (default)
• smoother: Ken Perlin's smootherstep

Quad is the mildest (t²), cubic is stronger (t³), sine is the most gradual.