Zeyi Posted September 3, 2020 Share Posted September 3, 2020 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 More sharing options...
ZachSaucier Posted September 3, 2020 Share Posted September 3, 2020 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 1 Link to comment Share on other sites More sharing options...
Zeyi Posted September 3, 2020 Author Share Posted September 3, 2020 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 More sharing options...
ZachSaucier Posted September 3, 2020 Share Posted September 3, 2020 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. 1 Link to comment Share on other sites More sharing options...
Zeyi Posted September 3, 2020 Author Share Posted September 3, 2020 Thank you, will give it a try. Link to comment Share on other sites More sharing options...
PointC Posted September 3, 2020 Share Posted September 3, 2020 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. 5 Link to comment Share on other sites More sharing options...
Zeyi Posted September 3, 2020 Author Share Posted September 3, 2020 Wow! That was real fast! 1 Link to comment Share on other sites More sharing options...
PointC Posted September 3, 2020 Share Posted September 3, 2020 time = money 1 Link to comment Share on other sites More sharing options...
Zeyi Posted September 4, 2020 Author Share Posted September 4, 2020 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!!! 3 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now