0

I'm trying to animate control points on SVG path independently. Let's say I want to draw a line from two points, point A on the left at (0, yA) and point B on the right at (100, yB).

I'd like to move yA to a random value within [0, 100]. After it's done animating, I'll ask it to move to another random value again, etc. Same as for B.

I have the following setup:

const yA = useMotionValue(10)
const yB = useMotionValue(80)

React.useEffect(() => {
  const controlA = animate(yA, Math.random() * 100, {
    duration: Math.random() * 4,
    onComplete: () => {
      // I'll ask it to animate again here
    }
  })
  return controlA.stop
}, [])

// same thing for point B...

return(
  <svg
    viewBox="0 0 100 100"
    width="100"
    height="100"
  >
    <motion.path d={`M 0 ${yA.get()} L 100 ${yB.get()}`} />
  </svg>
)

Currently I can't even get point A to move once. Printing out latest with onUpdate seems fine. Not sure how to get yA's value to d attribute though. Or do I have to animate the whole attribute with Framer Motion? Seems like other libraries can do that IIRC.

Art
  • 453
  • 4
  • 12
  • Instead of animating path points independently you can animate the d attribute between 2 values where only the desired point (points) is changing it's value – enxaneta Feb 26 '23 at 20:58
  • @enxaneta I'd like to be able to move the points independently. Let's say I want to move point A from 0 to 100 between t = 0 and t = 4, and point B from 0 to 100 between t = 1 and t = 4. Animating the `d` property means I'll need 3 keyframes: `[0,0]`, `[~sth,0]`, `[100,100]`. I don't want to figure out what that `~sth` would have to be. – Art Feb 27 '23 at 01:45

0 Answers0