Path's "d" attribute transition working not correctly

[mea_culpa]

Hi, I'm trying to make transition of path's "d" attribute and something strange happens, I know that both paths should have the same number of points. Can someone point me to what I'm missing here?

Thanks in advance!

See the Pen yLjzgrp by mea-cuipa (@mea-cuipa) on CodePen

[mvaneijgen]

Your path is not a line it are two lines really close to each other! What you want is just a single line. 

 

 Working with SVG on the web requires some elbow grease to get the files really clean. What I also see is that path points have a lot of decimal points 4248.45703125, this isn't the worst thing in the world, but the detail isn't necessary.

 

I've loaded your SVG in an online tool, so that you can better see it your self. If you zoom in you see there is a double line and that is what is messing up the animation 

[GreenSock]

If you're trying to interpolate between raw "d" strings, then not only would there need to be identical numbers of points in the start/end, but they'd also have to have identical path commands (so ONLY the numbers are changing). It's much cleaner to just use MorphSVGPlugin which solves all those problems for you. It'll let you use any number of points and it'll also figure out how to meld the path commands. Obviously that's only available to Club GreenSock members, through. 

 

Good luck!