Anime: SVG morph not working as expected.

[LukeCarlThompson]

I've been messing with this all day and can't get it to work or figure out a solution. I saw a couple of issues in the past but neither of them really solved it for me.

I just can't get the SVG morph to work properly. It looks like the shapes fold inside out instead of morph. I've tried exporting SVG's made in different ways and with both Illustrator and Sketch.

Codepen showing the issue here. It shows the animation breaking, then the start and finish points separately next to it.
https://codepen.io/LukeCT/pen/VMxpzQ

I'm trying to replicate the button bounce on the http://animejs.com homepage as a test. When I copy and paste your points (from the http://animejs.com source code) it works fine. But no matter what I've tried I can't get my own generated SVG points to work.

What am I doing wrong? How can I reliably generate SVG's for morphs?

[alexchantastic]

I think your paths might be malformed. The console is logging a ton of errors like this:

Error: <path> attribute d: Expected number,...

Can you link to the Sketch or Illustrator file you started with?

[LukeCarlThompson]

@alexchantastic Thanks for the input. I can't see the console errors when I open the console in codepen. Where are you seeing them?

The original file I don't have any more. So I repeated the steps again and got the same result in a forked codepen. This one is much closer to working but still not quite right. I have no idea why the results are different at all.

forked codepen here.
https://codepen.io/LukeCT/pen/eGKZxV

Original ai file and the two exported svg files can be downloaded here.
https://we.tl/5q6olg3mYP

The method for preparing the svg I used is as follows. Create a box in illustrator. Convert all points to bezier points. Duplicate the shape onto new artboard and move bezier handles to form the "bulged" shape. Then use "save as" command to save each artboard out as an svg file.

[LukeCarlThompson]

One thing I have noticed today is that the svg path data used on the anime.js home page buttons contains all uppercase C values. Where as the data I'm generating uses a mixture of uppercase C and lowercase c values for the coordinates.

According to this article the uppercase values are absolute coordinates and the lowercase ones are relative to the previous point. Could this be my issue? Any idea how to make sure illustrator only generates absolute path data points? Or how to convert them?

[LukeCarlThompson]

So it looks like I figured out why it doesn't work. It's due to the values of the SVG path not being the same type. After reading through the article by Chris Coyier I manually coded the paths and got it to work. However, this manual process is time-consuming and only suitable for very simple paths.

Is there some way to automate the process of making svg path data compatible?

[LukeCarlThompson]

Found this tool that converts relative svg points to absolute.

https://codepen.io/thednp/pen/EgVqLw

It works, but did give some weird results sometimes. Kind of annoying to have to go through this whole process to find out the limitations of svg. Might be worth considering whether to put some more info in the documentation about the limitations and how to work with them.

[alexchantastic]

You can see the console errors in the browser console. They don't seem to show up in the CodePen console.

I think it's an issue with how Illustrator exports these shapes. My exported SVGs are completely different from yours (maybe we're using a different versions):

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 100">
  <defs>
    <style>
      .cls-1 {
        fill: #d84444;
      }
    </style>
  </defs>
  <title>Artboard 1</title>
  <path class="cls-1" d="M290,90H10V10H290Z"/>
</svg>

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 100">
  <defs>
    <style>
      .cls-1 {
        fill: #d84444;
      }
    </style>
  </defs>
  <title>Artboard 2</title>
  <path class="cls-1" d="M290,90c-22,10-261,10-280,0C0,70,0,32,10,10,30,0,272,0,290,10,300,29,299,69,290,90Z"/>
</svg>

The issue with animating between these two shapes is that the initial shape is too different from the end shape to tween.

[LukeCarlThompson]

@alexchantastic Thanks for the help. I guess it's something I'll have to be aware of and work around when needed.

[stefanoortisi]

do you guys have suggestions about any visual editor to use to export the svgs so that animejs doesn't break the morphing animation? I'm currently using Illustrator and even for simple shapes, when i move some of their points, 80% of cases animejs breaks the shape while morphing.

[greaveselliott]

@LukeCThompson @stefanoortisi I spent this evening battling with the same issue. Stumbled across this browser-based animation tool https://shapeshifter.design/. You can upload your SVG's then tween the paths, the tool corrects 'incompatible paths' which causes the problem you described.

Good luck!

[joepagan]

Just had this issue myself, has anyone found a better tool/method yet if the SVGs are made in illustrator?
The issue is closed, because we know why it doesn't work, but, I don't think the suggested solution is maintainable. This additional step is going to be rather troublesome in the process, especially in bulk.

@juliangarnier sorry to bother you, Is there a particular method or tool you use to make animejs like your svg paths?

[greaveselliott]

@joepagan although not the most intuitive method, this process worked for morphing SVG's generated by Illustrator .

1. Export both animation frames of your vector animation as SVG's from illustrator
2. Upload your SVG to https://shapeshifter.design/
3. Within shapeshifter design, select your vector
4. Click the stopwatch icon found at the top of the right-sidebar menu
5. A drop-down menu will appear, click pathData
6. Open the second SVG animation frame
7. Locate the <path> tag
8. The <path> tag should have an attribute called d displayed like this <path d="some-value">
9. Copy the value of the <path> tags d attribute
10. Go back to the ShapeShifter web page you opened before
11. Paste the d attributes value into the field labeled toValue.
12. If there is a problem with your two SVG's syncronizing (likely causing the morphing issue) ShapeShifter will display a prompt asking if you'd like to correct this.
13. Click yes - ShapeShifter will update your two SVG paths so they can be animated smoothly
14. Copy and paste both the fromValue and toValue to your JS code for animating.

This worked for me, as said before it's not the smoothest workflow, but it corrected issues I had morphing SVG's generated by Illustrator.

[joepagan]

@greaveselliott thanks for getting back, I actually got the values out with http://shapeshifter.design already, though this is a rather time consuming step & not at all an efficient workflow, especially with more complex svgs, or, more than 3 I think I'd lose my mind.

It seems like we are missing something obvious...
My hope is that maybe Julian (or, some more experienced animejs users), can shed some light on a more efficient way to deal with standardising the path data to what animejs wants.

[greaveselliott]

No problem @joepagan, I agree, something does seem to be missing. Quite keen to hear any pointers about creating more complex SVG interactivity.