Jump to content


How to correctly morph SVG path using attr?

Recommended Posts


I am new to animation and SVG in general.

I am using attr property to morph between 2 paths in a SVG. I created the shapes with same number of anchor points in Illustrator. The problem I am experiencing is that at the start of the animation, the path is all messed up. I am not sure if what I did is correct but how can I achieve that the starting path is the one given and start expanding from there towards the new path? 

I created a codesandbox showing this behavior at https://codesandbox.io/s/falling-dew-7l0cz?file=/src/Animate.js

I was able to animate it correctly using different frames and a timeline, but is not as smooth.

Any help is greatly appreciated.

See the Pen Animate.js by s (@s) on CodePen

Link to comment
Share on other sites

Hey Zeyi and welcome to the GreenSock forums. This has to do with the points of your first path not being in the same order as the points in your second path. Even if you have the same number of points, if the order is not what you want (between the two) then it can end up in some funny looking animations.


MorphSVG has a built in shapeIndex attribute which can help solve some issues like this. But sometimes you just have to go into the editor and fix the paths yourself :) 

  • Like 1
Link to comment
Share on other sites

Hi Zach,

Thank you for the reply. Does order refer to how the path was created from start point to end point? If that is the case, I did ensure that the order was the same. I used the Pen Tool to trace the shape. For both shapes, I started at the bottom right, and traced the outside border going left, top, bottom right, then inner border going to top left, bottom and finally right connecting it with the start point. Is this what you were referring to or is it something else?

I do not have club membership, so I do not have access to MorphSVG. I will probably get it if I find myself needing really complex morphing.

Link to comment
Share on other sites

1 minute ago, Zeyi said:

Is this what you were referring to or is it something else?

That is what I'm referring to. In general it's best to duplicate the first path then move the points to where you need them to be. 

  • Like 1
Link to comment
Share on other sites

I'd probably just save a bunch of time and use MorphSVG. ;)


See the Pen 51987cdfcfcd7bb4080d4d5fe449e5e4 by PointC (@PointC) on CodePen


Happy tweening.




PS The club comes with a lot more than just MorphSVG. Tons of time saving plugins which also compensate for browser inconsistencies.

  • Like 5
Link to comment
Share on other sites

time = money ;)

  • Like 1
Link to comment
Share on other sites

I just wanted to thank you both Zach and Craig, I decided to play around with MorphSVG plugin in Codesandbox, and it became so much easier to achieve the animations I was looking for!!!

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.