Function toAnimationFrames

Converts interpolation functions written in this style (t, values, decimal) => { ... } to work in the BatchSpringEasing

You use it like so,

import { BatchSpringEasing, toAnimationFrames, toFixed, scale, limit } from "spring-easing";

function interpolateNumber(t: number, values: number[], decimal = 3) {
  // nth index
  const n = values.length - 1;

  // The current index given t
  const i = limit(Math.floor(t * n), 0, n - 1);

  const start = values[i];
  const end = values[i + 1];
  const progress = (t - i / n) * n;

  return toFixed(scale(progress, start, end), decimal);
}

function interpolatePixels(t: number, values: number[], decimal = 3) { 
  const result = interpolateNumber(t, values, decimal);
  return `${result}px`;
}

BatchSpringEasing(
  [0, 250], 
  'spring', 
  toAnimationFrames(interpolatePixels)
);
Copy