How to animate changes to svg path d attribute?

[kylegillen]

Hi. I'm trying to animate changes to an animated path component using withSpring for the dynamic values. I'm clearly doing something wrong however, as the value returned from withSpring doesn't get parsed in the string, and instead returns an object, which breaks the code. If I hoist the value out of the string to its own variable I get the same error.

To be clear, I'm trying to achieve an animation where the line goes from X1 -> X2 -> X3 ->X4 in a linear fashion, like straight lines drawing a box, or a stroke tracing the path of a circle.

Could someone point me in the right direction please?

Original Code

  const animatedProps = useAnimatedProps(() => {
    const { X: centerX, Y: centerY } = SCREEN.CENTER
    const path = `M${centerX} ${centerY} L${xPos.value} ${yPos.value} L${centerX} ${yPos.value} Z`
    const strokeDashoffset = 0
    return { d: path, strokeDashoffset }
  })

withSpring (doesn't work)

  const animatedProps = useAnimatedProps(() => {
    const { X: centerX, Y: centerY } = SCREEN.CENTER
    const path = `M${centerX} ${centerY} L${withSpring(xPos.value)} ${yPos.value} L${centerX} ${yPos.value} Z`
    const strokeDashoffset = 0
    return { d: path, strokeDashoffset }
  })

hoisted (doesn't work)

  const animatedProps = useAnimatedProps(() => {
    const { X: centerX, Y: centerY } = SCREEN.CENTER
    const springXPos = withSpring(xPos.value)
    const path = `M${centerX} ${centerY} L${springXPos} ${yPos.value} L${centerX} ${yPos.value} Z`
    const strokeDashoffset = 0
    return { d: path, strokeDashoffset }
  })