Is it possible to animate @react-three/drei/Text using @react-spring/three?

[bebensiganteng]

Trying to log <animated.text> or <animated.Text> yields undefined

[mattrossman]

Since text is not a primitive, the correct syntax would be to make an animated component with animated(Text)

[mbone1]

Could I bug you to elaborate on this a little further? I'm running into the exact same issue and not sure how to implement your solution.

Thanks.

[mattrossman]

Live example of animating the text scale:

https://codesandbox.io/s/interesting-dust-dwrwt

const AnimatedText = animated(Text)

function BouncyHello() {
  const spring = useSpring({
    from: { scale: [0, 0, 0] },
    to: { scale: [10, 10, 10] },
    config: {
      friction: 10,
    },
    delay: 1000,
  })
  return <AnimatedText {...spring}>Hello!</AnimatedText>
}

[mbone1]

perfect, thank you!