marsdei Posted January 14, 2020 Share Posted January 14, 2020 Can anyone help with my beginner problem? This is part of a bigger SVG but is the only part I am having trouble with. I need to understand why the M part of the logo doesn't move smoothly into position? Thanks See the Pen YzPjXdW by marsdei (@marsdei) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 14, 2020 Share Posted January 14, 2020 Hey marsdei and welcome to the GreenSock forums! Problems like this with MorphSVG are usually related to the shape index not being "correct", i.e. not what you expect it to be. You can set shapeIndex to a different number to change the starting point that MorphSVG should use. The reason this is necessary is because depending on how you create your SVGs their points may not align as you expect them to. Thus when they morph from one point to another the animation is different than how you expect it. For more information, check out the MorphSVGPlugin docs. In your case, setting shapeIndex to 0 for the first morph seems to fix the issue: morphSVG:{shape: "#char_small_the_m", shapeIndex: 0} See the Pen QWwBNRx?editors=0010 by GreenSock (@GreenSock) on CodePen However, if all you're doing is scaling the SVG, you don't even need MorphSVG. You can just use scale on the SVG: See the Pen dyPjXPp?editors=0010 by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
marsdei Posted January 15, 2020 Author Share Posted January 15, 2020 This is excellent, solved my issue thanks. I had looked at shapeIndex but couldn't see how it would work in my situation In terms of the scale option this actually is probably what I will end up using so thank you for the complete answer! 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