Easing functions

iLoveVideoEditor 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:

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

NOTE

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.