Transitions
Transitions are a declarative shortcut for common layer in/out motion. Set transitionIn and transitionOut on any layer; the builder expands them into the matching keyframe sequence when the layer starts and ends.
On this page
const $ = new VideoFlow({ width: 512, height: 512, fps: 30, backgroundColor: '#0a0a1a' });
const t = $.addText(
{
text: 'Slide + blur',
fontSize: 10, fontWeight: 800, color: '#fff',
position: [0.5, 0.5],
},
{
transitionIn: { transition: 'slideUp', duration: '700ms', easing: 'easeOut' },
transitionOut: { transition: 'blurResolve', duration: '500ms' },
},
);
$.wait('1.5s');
t.remove();
$.wait('500ms');
return $;Built-in presets
The renderer ships 27 transition presets. Each one is a single registered name you reference under transition; pass preset-specific knobs through params.
| Group | Presets |
|---|---|
| Opacity / scale | fade, zoom, overshootPop, radialZoom |
| Slide | slideUp, slideDown, slideLeft, slideRight |
| Blur | blurResolve, motionBlurSlide |
| 3D / spin | rotate3dY, tilt3d, spin |
| Glitch / RGB | glitchResolve, rgbSplitSnap |
| Slice / dissolve | sliceAssemble, noiseDissolve, burnDissolve |
| Wipe / reveal | wipeReveal, scanReveal, lightSweepReveal, lensSnap |
| Type | typewriter, scrambleDecode, trackingExpand, trackingContract, numberCountUp |
Options
const t = $.addText(
{ text: 'Announce' },
{
transitionIn: {
transition: 'slideUp',
duration: '700ms',
easing: 'easeOut',
params: { distance: 0.1 }, // preset-specific knobs go in params
},
transitionOut: {
transition: 'blurResolve',
duration: '500ms',
},
},
);
$.wait('2s');
t.remove(); // triggers transitionOut.animate(). Transitions are a shortcut. If you want something custom (two axes at different speeds, colour shifts, effect-parameter interpolation), use .animate() directly.