Migrate interpolate() to to() in v9

[RomainCscn]

Hello!

I'm new to react-spring, and used v8 to accomplish a simple scale animation.
I'm trying to migrate this simple animation to v9 but can't find a way to do it. It says that interpolate is now deprecated and I should use the to() function instead.

Here's the component, where Text is a styled-components using styled(animated.div):

const Component = () => {
  const { x } = useSpring({ from: { x: 0 }, x: 1 });

  return (
    <Text
      style={{
        opacity: x.interpolate({ range: [0, 1], output: [0, 1] }),
        transform: x
          .interpolate({
            range: [0, 0.2, 0.5, 1],
            output: [1, 0.7, 1.5, 1],
          })
          .interpolate((x: number) => `scale(${x}) rotate(4deg)`),
      }}
    >
     My text
    </Text>
  );
};

I couldn't find any example using this syntax, if you could help on this, thanks in advance!

[aleclarson]

Same interface, but named .to() instead of .interpolate()

[RomainCscn]

Oh, I was getting an error with opacity but this wasn't related. I see that there is already issues opened for this.

I fixed it using

        opacity: x.to({ range: [0, 1], output: [0, 1] }) as any,

Is there a better way than using the following with v9?

        transform: x
          .to({
            range: [0, 0.2, 0.5, 1],
            output: [1, 0.7, 1.5, 1],
          })
          .to((x: number) => `scale(${x}) rotate(4deg)`),

[aleclarson]

You can use shorthand style props.

[RomainCscn]

Do you have any examples? I can't find one using range / output.

[aleclarson]

You keep the range, output call, then pass it to style.scale and pass style.rotateZ: '4deg' after that.