React-spring: Combine multiple animated values

[stolinski]

Let's say you wanted to drag left and right and interpolate a rotation from the deltaX. Using .interpolate({ map: Math.abs, range: [0, 300], output: [0, 90], extrapolate: 'clamp' }) could work for the rotation, but how do you interpolate both a rotation value and a translate value from the same source.

Using https://codesandbox.io/s/74l3qwjv2j I'm looking to interpolate the rotate value from the X value but separately from the actual X position.

[drcmda]

@stolinski

first of all fetch interpolate, it's a helper that can deal with multiple animatable values:

import { Spring, interpolate } from 'react-spring'

If you can make do without extrapolating and stuff, then it's easy, you give it the values you need, and a function which creates the result:

{({ x, y }) =>
    <div style={{ transform: interpolate([x, y], (x, y) => `translate(${x}px, ${y}px)`) }} />
}

If you do need to extrapolate/clamp and so on, then you can interpolate the values itself like you're used to by calling interpolate on them directly:

<div style={{ 
    transform: interpolate(
        [x.interpolate({ ... }), y.interpolate({ ... })],
        (x, y) => `translate(${x}px, ${y}px)`
    )}} />

You can even route one interpolation result into another that way, for instance clamping values, then casting them into output friendly results:

<div style={{ 
    transform: interpolate(
        [
            scale.interpolate(clamp).interpolate(v => `scale(${v})`),
            rotation.interpolate(clamp).interpolate(v => `rotation(${v}deg)`
        ],
        (scale, rotation) => `${scale} ${rotation}`
    )}} />

Basically, interpolations constitute animatable values and are chainable.

More info here: https://github.com/drcmda/react-spring/blob/master/API-OVERVIEW.md#single-or-multiple-value-interpolation

[drcmda]

Btw, i just realized why the name seemed so strangely familiar, i'm an avid syntax listener 😀

[stolinski]

@drcmda Thanks!! Amazing work. I'm totally blown away by the examples. I'm taking some notes for things that I'm running into and will try and commit some to the docs.

[aleclarson]

More search keywords:

• combine animated values
• merge interpolations

[n1ru4l]

Is there an example for this in the documentation? Could not find any, also it took some time to find this issue, I tried searching for transform interpolate 😅.

[Noor0]

@stolinski

first of all fetch interpolate, it's a helper that can deal with multiple animatable values:

import { Spring, interpolate } from 'react-spring'

If you can make do without extrapolating and stuff, then it's easy, you give it the values you need, and a function which creates the result:

{({ x, y }) =>
    <div style={{ transform: interpolate([x, y], (x, y) => `translate(${x}px, ${y}px)`) }} />
}

If you do need to extrapolate/clamp and so on, then you can interpolate the values itself like you're used to by calling interpolate on them directly:

<div style={{ 
    transform: interpolate(
        [x.interpolate({ ... }), y.interpolate({ ... })],
        (x, y) => `translate(${x}px, ${y}px)`
    )}} />

You can even route one interpolation result into another that way, for instance clamping values, then casting them into output friendly results:

<div style={{ 
    transform: interpolate(
        [
            scale.interpolate(clamp).interpolate(v => `scale(${v})`),
            rotation.interpolate(clamp).interpolate(v => `rotation(${v}deg)`
        ],
        (scale, rotation) => `${scale} ${rotation}`
    )}} />

Basically, interpolations constitute animatable values and are chainable.

More info here: https://github.com/drcmda/react-spring/blob/master/API-OVERVIEW.md#single-or-multiple-value-interpolation

thanks man, you saved me a lot of time, btw why is this function not mentioned in documentation?