Motion: [BUG] Trying to manipulate SVG "d" values causes error

[Mellis84]

I am wanting to use the same functionality to Poses SVG morphing, I try something like:

const boxVariants = {
  initial: {
    fill: "pink",
    d:
      "M510,255c0-20.4-17.85-38.25-38.25-38.25H331.5L204,12.75h-51l63.75,204H76.5l-38.25-51H0L25.5,255L0,344.25h38.25 l38.25-51h140.25l-63.75,204h51l127.5-204h140.25C492.15,293.25,510,275.4,510,255z",
  },
  hover: {
    fill: "pink",
    d:
      "M255,0C114.75,0,0,114.75,0,255s114.75,255,255,255s255-114.75,255-255S395.25,0,255,0z",
  },
}

And I get an error saying: Error: Complex values 'M255,0C114.75,0,0,114.75,0,255s114.75,255,255,255s255-114.75,255-255S395.25,0,255,0z' and 'M510,255c0-20.4-17.85-38.25-38.25-38.25H331.5L204,12.75h-51l63.75,204H76.5l-38.25-51H0L25.5,255L0,344.25h38.25 l38.25-51h140.25l-63.75,204h51l127.5-204h140.25C492.15,293.25,510,275.4,510,255z' too different to mix. Ensure all colors are of the same type. at invariant (hey-listen.es.js:11)

Can Framer Motion support SVG morphing yet?

Cheers!

[zambo]

Same here. Hover works fine, but I get an error on open.

          variants={{
            closed: { d: "M8.9,8.4h14.1" },
            open: { d: "M8.888,8.888,23.112,23.112" },
            hover: { d: "M5.9,8.4h20.1" },
          }}

         variants={{
            closed: { d: "M8.9,23.6h14.1" },
            open: { d: "M8.888,23.112,23.112,8.888" },
            hover: { d: "M5.9,23.6h20.1" },
          }}

[larsvankleef]

Same here. But i don't think it is really a bug. Can't find a thing about it in the documentation 😿

[zambo]

As far as I understand, it doesn't morph the SVG, it just manipulate its positions. So, maybe when one of the variants has different paths it doesn't know what to do.

In my case, I've changed every h inside my SVG to l and it's working now.

variants={{
  closed: { d: " M8.942, 8.421 L 23.058, 8.42" },
  open: { d: "M 8.888, 8.888, L 23.112 ,23.112" },
  hover: { d: "M 5.942, 8.421 L 26.058, 8.421" },
}}

This is just one line of a hamburger menu, so it's quite easy to change it by hand. Don't know about more complex SVGs. Illustrator, figma, xd and sketch each exported it a little bit different.

Here are the svg path properties for reference:

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath

[Regaddi]

I'm experiencing this issue when changing the amount of points inside of a <motion.path>.
Here's a CodeSandbox demonstrating the issue:
https://codesandbox.io/s/wizardly-feather-qqv3q?file=/src/App.js
Click on the SVG and you should see the error: