Function toAnimationFrames

  • Converts old interpolation syntax (the instantaneous interpolation function, e.g. (t, values, decimal) => { ... }) to complete animation frames

    You use it like so,

    import { SpringEasing, 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`;
    }

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

    Parameters

    Returns TypeInterpolationFunction

Generated using TypeDoc