Jump to content
Search Community

How to correctly morph SVG path using attr?

Zeyi test
Moderator Tag

Recommended Posts

Hello,

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

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.
×
×
  • Create New...