Interpolation usage docs

[xndyz]

🤓 Question

It looks like .interpolate has been depreciated, but there are currently no docs on what the correct usage is. Currently the old API still works, but it seems odd that the new API would be pushed when the usage isn't clear.

Could someone provide a usage here and maybe we can look into adding that into the docs?

For example, how might one do this with the new API?

        <animated.div
          style={{
            opacity: styles.opacity,
            transform: styles.y.interpolate((y) => `translateY(${y}px)`),
          }}
        >

[joshuaellis]

It's definitely documented in the docs under interpolation. It's simply renamed to to so your code would be come:

<animated.div
  style={{
    opacity: styles.opacity,
    transform: styles.y.to((y) => `translateY(${y}px)`),
  }}
>

But you don't actually need to do that interpolation is v9 of react-spring you could simply pass the y prop to the styles object 👍🏼

[xndyz]

Do you mean like this:

        <animated.div
          style={{
            opacity: styles.opacity,
            transform: `translateY(${styles.y}px)`,
          }}
        >

Because that doesn't work (but to does).

[joshuaellis]

no I mean like this:

<animated.div
  style={{
    opacity: styles.opacity,
    y: styles.y,
  }}
>

[xndyz]

Ah I see, doing it that way is bad for performance. Looks like to is the right play here!