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 convert 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.

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