Animate & keyframes

Every animatable property on a layer is stored as an array of { time, value, easing } keyframes. You don't write them by hand — .animate() and its shortcuts push keyframes onto the layer at the current flow-pointer time.

.animate(from, to, opts)

layer.animate(
  { opacity: 0, scale: 0.9, position: [0.4, 0.5] },
  { opacity: 1, scale: 1,   position: [0.5, 0.5] },
  { duration: '800ms', easing: 'easeOut' },
);

Each property in from / to generates a pair of keyframes: one at the flow pointer, one at pointer + duration. Props not in the object are left alone. If the property already has later keyframes, animate() inserts into the sequence — the existing keyframes don't move.

Options

.set(patch)

.set() patches layer props without creating keyframes. Use it for values that should jump discretely — text content, fontFamily, etc.

chip.set({ text: 'SAVING' });

Chaining calls

Multiple .animate() calls on the same layer simply chain keyframes. The flow pointer after one call is the starting time for the next.

const $ = new VideoFlow({ width: 512, height: 512, fps: 30, backgroundColor: '#111' });

const chip = $.addText({
  text: 'STATUS', fontSize: 8, fontWeight: 700, color: '#fff',
  backgroundColor: '#22c55e', padding: '0.4em 1em', borderRadius: '999px',
  position: [0.5, 0.5],
});

// Chain three animate() calls — each pushes its own keyframe pair.
chip.animate({ backgroundColor: '#22c55e' }, { backgroundColor: '#eab308' }, { duration: '600ms' });
chip.set({ text: 'SAVING' });
chip.animate({ backgroundColor: '#eab308' }, { backgroundColor: '#ef4444' }, { duration: '600ms' });
chip.set({ text: 'ERROR' });
chip.animate({ backgroundColor: '#ef4444' }, { backgroundColor: '#22c55e' }, { duration: '600ms' });
chip.set({ text: 'OK' });

$.wait('1.2s');
return $;

Fade shortcuts

layer.fadeIn('500ms');         // animate opacity 0 → 1
layer.fadeOut('500ms');        // animate opacity 1 → 0
layer.show();                  // set opacity 1 at the flow pointer (no interpolation)
layer.hide();                  // set opacity 0 at the flow pointer

Animatable properties

Any numeric, colour, or array-numeric property. Not exhaustive:

• opacity, scale, rotation
• position — animated as [x, y] vector
• anchor — same
• color, backgroundColor — RGB interpolated
• fontSize, letterSpacing, lineHeight
• filterBlur, filterBrightness, filterSaturate
• volume (audio / video)
• effects.<name>.<param> via dot-path (see Effects)