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.

// LiveFlowDemo
const $ = new iLoveVideoEditor({ 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

TIP

Transitions vs .animate(). Transitions are a shortcut. If you want something custom (two axes at different speeds, colour shifts, effect-parameter interpolation), use .animate() directly.