Svg morph with anime js not changing path

Question

i'm trying to make some svg animations using anime js, i thought it would work just fine because, because i just need to change de d atribute.

I was using some blobs, but it seems that the code isn't recognizing their paths. This is a pen i created to load the svg's https://codepen.io/obarrier/pen/eYmyEEa

This is the pen of the animations https://codepen.io/obarrier/pen/NWPXvRy

I know i'm doing something wrong, but can't figure out where the error is...Because the path isn't being recognized

Thanks in advance!

Answer 1

I see a few issues. The first, is you have a space after .blobPath in your second codepen.

targets: '.blobPath ',

Secondly, your paths are really messed up. The 3 values you provide after the first value is waaaayyyyyy outside the view box. Plus it looks like you have a rotation on your main path, but you don't on your other paths.

I found that if you create one file for your animation. You can just duplicate a path and then rework the new path. Do this for each path you want to animate. That way you will be sure that the points are correct.

Then you just export the SVG and open it up in your favorite text editor and copy the "d" values into your code.

d="M265.42,72.182l0,-72.182l-265.42,0l0,82.817c0,0 12.811,13.647 32.105,14.751c19.294,1.104 57.317,-11.093 57.317,-11.093l43.249,-13.139c0,0 20.977,-7.784 40.873,-7.784c19.897,0 38.711,7.784 38.711,7.784c0,0 27.756,11.399 41.335,7.557c13.579,-3.842 11.83,-8.711 11.83,-8.711Z"

I reworked your code pen, I think it's doing what you want it to do. I didn't spend a lot of time working on the paths. I'll leave that up to you.

https://codepen.io/cjboco/pen/zYGMmKm