Animate Path

[tnorlund]

I've been using react-spring's renderprops for a while and really like it. I'm attempting to use useSpring now.

I'd like to animate a SVG <path /> so that I can modify the "d" attribute using Spring. I'd like to modify the 2 'handles,' P1 and P2, in the following example.

const P0 = { x: 20, y: 50 }
const P1 = { x: 20, y: 75 }
const P2 = { x: 110, y: 20 }
const P3 = { x: 180, y: 50 }

const Bezier = () => {
  const [ref, inView] = useInView( { threshold: 1, } )
  const props = useSpring( { number: inView ? P0.x : P3.x } )
...
return <div ref={ref} style={ { height: `200pt`, } }>
    <animated.span>
      <svg
        width="100%"
        height="100%"
        viewBox={`0 0 ${ width } ${ height }`}
        preserveAspectRatio="XMaxYMax"
      >
...
        <animated.path
          stroke={`var(--color-text)`}
          strokeWidth={`1.5px`}
          fill={`none`}
          d={`M ${P0.x} ${P0.y} C ${P1.x} ${P1.y}, ${P2.x} ${P2.y}, ${P3.x} ${P3.y}`} // <- Can I interpolate this?
        />

[tnorlund]

I fixed this by interpolating between different 'output's:

         <animated.path
            stroke={`var(--color-text)`}
            strokeWidth={`1.5px`}
            fill={`none`}
            d={ props.x.interpolate( {
              range: [ min_x, max_x ], output: [ d0, d1 ]
            } ) }
          />