redtoad Posted January 1, 2020 Share Posted January 1, 2020 Ok so I'm a super newbie and I've looked but can't find the answer to this, probably because the answer is too simple. I'm trying to MorphSVG my first bug here into my second bug. There are a lot of paths. I'm willing to go try to match these paths and morph them but want to check before I do all that work and make sure there isn't something I'm missing? I saw a video where it looked like the morphing was this complicated and the guy talked about subpaths and how the algorithm chose them but all the examples have one simple path being morphed to another simple path. Do I have to morph each little path to the corresponding path on my new shape? See the Pen MWYEzYQ#code-area by redtoad (@redtoad) on CodePen Link to comment Share on other sites More sharing options...
mikel Posted January 1, 2020 Share Posted January 1, 2020 Hey @redtoad, Welcome to the GreenSock Forum. If all parts are in the same order, then you can use arrays and for ... See the Pen MLyXPO by mikeK (@mikeK) on CodePen However, note that the positions (start / end position, as desired by you) are correct. See the Pen rNaGQGo by mikeK (@mikeK) on CodePen See the Pen MNbLOd by mikeK (@mikeK) on CodePen Happy tweening ... Mikel Link to comment Share on other sites More sharing options...
GreenSock Posted January 1, 2020 Share Posted January 1, 2020 Another option is to COMBINE your paths into one complex one because they all share the same fill and other attributes anyway, right? Most drawing programs allow you to combine multiple paths into one. Or you could do it with JS, but it's a bit more complex. Let me know if you need help with that. So in the end, you'd only have two <path> elements - one for the starting shape and one for the ending shape. See what I mean? Or, like @mikel said, you could use loops but that might get a little tricky to make sure everything is in the order you want so that each sub-path in the starting shape matches with the one in the ending shape. MorphSVGPlugin has an algorithm that tries to make sense of that automatically in complex paths. Happy tweening! 1 Link to comment Share on other sites More sharing options...
mikel Posted January 2, 2020 Share Posted January 2, 2020 To show the effects: See the Pen VwYMoWW by mikeK (@mikeK) on CodePen Happy morphing ... Mikel 2 Link to comment Share on other sites More sharing options...
redtoad Posted January 2, 2020 Author Share Posted January 2, 2020 16 hours ago, GreenSock said: Another option is to COMBINE your paths into one complex one because they all share the same fill and other attributes anyway, right? Most drawing programs allow you to combine multiple paths into one. Or you could do it with JS, but it's a bit more complex. Let me know if you need help with that. So in the end, you'd only have two <path> elements - one for the starting shape and one for the ending shape. See what I mean? Or, like @mikel said, you could use loops but that might get a little tricky to make sure everything is in the order you want so that each sub-path in the starting shape matches with the one in the ending shape. MorphSVGPlugin has an algorithm that tries to make sense of that automatically in complex paths. Happy tweening! I can't combine the paths without losing the space between the pieces, which is essential. Unless you know of some wizardry which allows me to do that. But thank you. Link to comment Share on other sites More sharing options...
redtoad Posted January 2, 2020 Author Share Posted January 2, 2020 2 hours ago, mikel said: To show the effects: Happy morphing ... Mikel Yeah, since what I'm going for is actually the bug raising its wings? I think I'll have to rethink the way this happens. But the answer to my question was, yes. I have to tween each separate object. got it. Not a problem, just tedious! Thank you so much! Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 2, 2020 Share Posted January 2, 2020 1 minute ago, redtoad said: I can't combine the paths without losing the space between the pieces, which is essential. Unless you know of some wizardry which allows me to do that. Sure, it's easy. In your vector editor, just use the combine command. In Inkscape it's under Path > Combine. 2 Link to comment Share on other sites More sharing options...
redtoad Posted January 2, 2020 Author Share Posted January 2, 2020 looking!!! Link to comment Share on other sites More sharing options...
redtoad Posted January 2, 2020 Author Share Posted January 2, 2020 oooooooo ok in Illustrator it is called a compound path. Compound Path > Make works. I still am unsure about the tweening, if it will work but this definitely makes me feel better! thank you. Link to comment Share on other sites More sharing options...
mikel Posted January 2, 2020 Share Posted January 2, 2020 I am not sure, but merged paths do not change the order of the individual parts - see pen above. Hey @redtoad, Rethink your SVG structure, rearrange the parts. Here is a 'flying example': See the Pen aWQdLa by mikeK (@mikeK) on CodePen Link to comment Share on other sites More sharing options...
redtoad Posted January 2, 2020 Author Share Posted January 2, 2020 no, you're right Mikel but what I can do is Morph to the point where I have a body, then make a compound path of the wings and motion tween those. Problem solved. Thank you so much for your help! The motion tween shall be fun because I basically need it to blur, but I will be back with more stupid questions as needed. 3 Link to comment Share on other sites More sharing options...
redtoad Posted January 2, 2020 Author Share Posted January 2, 2020 great example @mikel thank you! 1 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