Interpolation

What is one?

An interpolation typically is a function that takes a value returns another value. You can even map ranges of values – numbers are typically required as the input range. So for example, if you want to animate a value from 0 to 100, you can use an interpolation to map the range 0 to 1 to 0 to 100.

Basic Usage

Extending the SpringValue

The most common use of our interpolation is to conver the value of a SpringValue to another value. This is done by using the to method.

import { useSpring, animated } from '@react-spring/web'
function MyComponent() {
const props = useSpring({
from: { x: 0 },
to: { x: 360 },
})
return (
<animated.div style={{ transform: props.x.to(value => `rotateZ(${value}deg)`) }}>
Hello World
</animated.div>
)
}

Using the to function

Similar to the example above, it's also possible to use our to function to convert SpringValues.

import { useSpring, animated, to } from '@react-spring/web'
function MyComponent() {
const props = useSpring({
from: { x: 0 },
to: { x: 360 },
})
return (
<animated.div style={{ transform: to(props.x, value => `rotateZ(${value}deg)`) }}>
Hello World
</animated.div>
)
}

Advanced Usage

Combining values

A more advanced use of our interpolation is to combine multiple SpringValues. This normally requires the use of our to function to create.

import { animated, to, useSpring } from '@react-spring/web'
export default function MyComponent() {
const props = useSpring({
from: { x: 0, y: 0, z: 0 },
to: { x: 1, y: 1, z: 1 },
})
return (
<animated.div style={{ transform: to( [props.x, props.y, props.z], (x, y, z) => `rotate3d(${x}, ${y}, ${z}, 45deg)` ), }}>
Hello World
</animated.div>
)
}

Ranges and Outputs

The to function also accepts a range of input values as the first argument and the output of that range. Interpolations can be chained, as seen in the example below we change a value 0-1 to 0-360 and then interpolate it to a rotateZ value.

import { useSpring, animated } from '@react-spring/web'
function MyComponent() {
const props = useSpring({
from: { x: 0 },
to: { x: 1 },
})
return (
<animated.div style={{ transform: props.x .to([0, 1], [0, 360]) .to(value => `rotateZ(${value}deg)`), }}>
Hello World
</animated.div>
)
}

Config

An interpolation can also take a config object as the second argument if using the to function or the first argument when using the to method of a SpringValue.

PropTypeDefault
extrapolateLeftstringextend
extrapolateRightstringextend
extrapolatestringextend
rangenumber[][0,1]
outputnumber[]
mapfunctionnull

Overriding the global to function

If you decide to, it is possible to override the global Interpolation factory which is what's called when to is used.

import { Globals } from '@react-spring/web'
Globals.assign({
to: (source, args) => new CustomInterpolation(source, args),
})

Typescript

function to<Input extends ReadonlyArray<any>, Output>(
parents: Input,
interpolator: (...args: Interpolated<Input>) => Output
): Interpolation<Output>
function to<Input, Output>(
parent: FluidValue<Input> | Input,
interpolator: InterpolatorFn<Input, Output>
): Interpolation<Output>
function to<Out>(
parents: FluidValue[],
config: InterpolatorConfig<Out>
): Interpolation<Animatable<Out>>
function to<Out>(
parents: Array<FluidValue<number>> | FluidValue<number[]>,
range: readonly number[],
output: readonly Constrain<Out, Animatable>[],
extrapolate?: 'identity' | 'clamp' | 'extend'
): Interpolation<Animatable<Out>>