Easing functions
VideoFlow ships 5 named easings. Set one per project via defaults.easing, or override per-animation with the easing option.
| Name | Shape | When to use |
|---|---|---|
step | Hold → jump | Discrete state (text swaps, SFX cues). |
linear | Constant velocity | Ken Burns pans, scrolling credits. |
easeIn | Starts slow, accelerates | Exiting offscreen. |
easeOut | Fast start, soft stop | Default for most UI motion. |
easeInOut | Soft start and stop | Long transforms. |
Compare side-by-side
Each row is a dot sliding across with a different easing:
const $ = new VideoFlow({ width: 512, height: 512, fps: 30, backgroundColor: '#0b0b1f' });
const rows = [
{ label: 'linear', easing: 'linear', y: 0.2 },
{ label: 'easeIn', easing: 'easeIn', y: 0.35 },
{ label: 'easeOut', easing: 'easeOut', y: 0.5 },
{ label: 'easeInOut', easing: 'easeInOut', y: 0.65 },
{ label: 'step', easing: 'step', y: 0.8 },
];
$.parallel(rows.map((r) => () => {
const dot = $.addText({ text: '●', fontSize: 8, color: '#ff5a1f', position: [0.35, r.y] });
$.addText({ text: r.label, fontSize: 4, color: '#888', position: [0.04, r.y], textAlign: 'left' });
dot.animate({ position: [0.35, r.y] }, { position: [0.9, r.y] }, { duration: '2s', easing: r.easing });
}));
$.wait('1s');
return $;Per-keyframe easing
Each keyframe carries its own easing — it describes the outgoing interpolation from that keyframe to the next. The last keyframe in a sequence is a terminator; its easing is ignored.
Custom easings. Roll your own by pushing raw keyframes instead of using .animate() — set the keyframe's easing to any cubic-bezier or custom function accepted by the renderer.