---
meta:
  title: Interpolation | React Spring
  'og:title': Interpolation | React Spring
  'twitter:title': Interpolation | React Spring
  description: An advanced guide to the interpolation API in React Spring.
  'og:description': An advanced guide to the interpolation API in React Spring.
  'twitter:description': An advanced guide to the interpolation API in React Spring.
  'og:url': https://www.react-spring.dev/docs/advanced/interpolation
  'twitter:url': https://www.react-spring.dev/docs/advanced/interpolation
sidebar_position: 6
---

import { formatFrontmatterToRemixMeta } from '../helpers/meta'

export const meta = formatFrontmatterToRemixMeta(frontmatter)

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

```tsx lines=10
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 `SpringValue`s.

```tsx lines=1,10
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 `SpringValue`s. This normally requires the
use of our `to` function to create.

```tsx lines=1,10
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.

```tsx lines=10
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`.

import { TablesConfiguration } from '../components/Tables/TablesConfig'
import { INTERPOLATONS_DATA } from '../data/fixtures'

<TablesConfiguration data={INTERPOLATONS_DATA} />

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

```ts
import { Globals } from '@react-spring/web'

Globals.assign({
  to: (source, args) => new CustomInterpolation(source, args),
})
```

## Typescript

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