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() — play(fadeIn(shape)) will add 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
• easeIn — starts slow, accelerates
• easeOut — starts fast, decelerates
• easeInOut — slow at both ends
• smooth — Hermite smoothstep (default)
• smoother — Ken Perlin's smootherstep