REVERT _The new interpolation syntax has been reverted and removed; instantNumber, etc... functions have been renamed to interpolateNumber, etc..._

NEW _Re-introduced instantaneous interpolation functions._

e.g.

import { interpolateNumber, interpolateString, interpolateSequence, interpolateComplex } from "spring-easing";

These functions represent the interpolated value at a specific instance in time, where time is represented by t with a range of 0 to 1.

You can use these functions as building blocks to create your own custom interpolation functions.

NEW _(deprecated) interpolateUsingIndex is now an alias of interpolateSequence, it still keeps the same functionality._

The recommendation is to use interpolateSequence instead of interpolateUsingIndex, but you can still keep using interpolateUsingIndex, but beware it can be removed in future versions.

<strike> NEW _Re-introduced instantaneous interpolation functions._

e.g.

import { instantNumber, instantString, instantSequence, instanceComplex } from "spring-easing";

These functions represent the interpolated value at a specific instance in time, where time is represented by t with a range of 0 to 1.

You can use these functions as building blocks to create your own custom interpolation functions.

</strike>

<strike> BREAKING CHANGE _Interpolation functions use a new syntax._

_In older versions of spring-easing interpolation functions used to follow a syntax called the instantaneous interpolation function (t, values, decimal) => string | number | any, the new syntax is called interpolation function (frames, values, decimal) => string[] | number[] | any[]._

_The key difference between both syntaxes are the parameters each function takes and the return value of each function._

_The older syntax returned instantaneous frame values at a specific t-value, but the new syntax returns all the frames that make the entire animation, allowing for performance optimizations that couldn't be done before._

_For the most part this shouldn't leave too much of an effect as all the built-in interpolation functions have been updated to use the new synatax._

e.g.

function interpolateNumber(frames: number[], values: number[], decimal = 3) {

// nth index

const n = values.length - 1;

return frames.map(t => {

// 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);

});

}

SpringEasing([0, 250], spring, interpolateNumber)

</strike>

<strike> NEW _There is a new toAnimationFrames function that be used on instantaneous interpolation functions, to transform them into complete animation interpolation functions._

e.g.

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)

);

</strike>

NEW _Easily register new easing functions._

e.g.

import { SpringEasing, registerEasingFunction } from "spring-easing";

registerEasingFunction("linear", (t) => t);

registerEasingFunctions({

quad: (t) => Math.pow(t, 2),

cubic: (t) => Math.pow(t, 3),

});

SpringEasing(

[0, 250],

'linear'

);

SpringEasing(

[0, 250],

'quad'

);

NEW _SpringEasing now support interpolating between strings. It treats the units of the first value as the units for the rest of the values to interpolate between._

e.g.

SpringEasing(["0turn", "1px", "18rem", "125deg", 25], ...)

_Important All the values above get transformed to ["0turn", "1turn", "18turn", "125turn", "25turn"], before being interpolated._

NEW _interpolateStrings, interpolateUsingIndex, and interpolateComplex, are now built-in, they allow for supporting string keyframes._

NEW _Custom interpolation functions are now supported._

e.g.

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

// ...

export function interpolateColor(t: number, values: string[], decimal = 3) {

const color = transpose(...values.map((v) => rgba(v)))

.map((colors: number[], i) => {

const result = interpolateNumber(t, colors);

return i < 3 ? Math.round(result) : toFixed(result, decimal);

});

return rgba(${color.join()});

}

SpringEasing(["red", "green", "#4f4"], "spring", interpolateColor);

_Important The logic for color interpolation is defined in this tests/utils/interpolate-color.ts._