Morph svg multiple path

[Jumaworks]

Hello Greensock. I'm playing arond with the MorphSVG Plugin but i'm having some problems.

How  can i morph between two svg with different number of path?! (please see the codepen for more details)

I can also select the entire of path in each group but that's not the way. I will attach two svg also.

Hope i can get the help. Thanks!

work-svg.svg qd-svg.svg

See the Pen wvOGgJv by mchanh (@mchanh) on CodePen

[mvaneijgen]

Hi @Jumaworks welcome to the forum and thanks for being a club member! 

 

I'm not completely sure what you're asking, but MorphSVG is to morph between two shapes and these need to be two <path>'s, best is to morph between two elements with the same amount of points for the best results

 

Our own @PointC has some great tutorials on how to export SVGs for morph SVG getting your files ready for animation is the hard part 

 

https://www.motiontricks.com/organic-morphing-getting-needed-points-from-adobe-illustrator/

 

Right now you're looping through 4 workitems and you have  11 qd items in total, so I'm not sure what suppose to happen right now. I see indeed four shapes morphing to four other shapes, but the loops stops at 4 so nothing more will happen. If I'm guessing what is is you want is that you'll have to duplicated your work items until you have as many as your qd items (eg 11) and then just morph the duplicate items to the other shapes?

 

See the Pen WNmwRWR?editors=1011 by mvaneijgen (@mvaneijgen) on CodePen

 

 

[Jumaworks]

36 minutes ago, mvaneijgen said:

Hi @Jumaworks welcome to the forum and thanks for being a club member! 

 

I'm not completely sure what you're asking, but MorphSVG is to morph between two shapes and these need to be two <path>'s, best is to morph between two elements with the same amount of points for the best results

 

Our own @PointC has some great tutorials on how to export SVGs for morph SVG getting your files ready for animation is the hard part 

 

https://www.motiontricks.com/organic-morphing-getting-needed-points-from-adobe-illustrator/

 

Right now you're looping through 4 workitems and you have  11 qd items in total, so I'm not sure what suppose to happen right now. I see indeed four shapes morphing to four other shapes, but the loops stops at 4 so nothing more will happen. If I'm guessing what is is you want is that you'll have to duplicated your work items until you have as many as your qd items (eg 11) and then just morph the duplicate items to the other shapes?

 

 

 

 

 

Thank @mvaneijgen for reply. 

Yeah i know this plugin possible morph between two shapes. What you are guessing is completely correct to me.

But idk if we can morph between two svg i currently have? Like morph "Work" svg from "QuangDinh" svg

 

[GreenSock]

8 hours ago, Jumaworks said:

But idk if we can morph between two svg i currently have? Like morph "Work" svg from "QuangDinh" svg

You can't just point at an entire <svg> file and tell it to morph into another entire <svg> file, no. Each morph occurs on a single <path> element (it's animating the path's "d" attribute). Does that answer your question? 

 

If all your artwork in a particular <svg> has a single fill style, then you should be able to merge all the paths into a single <path> that you could morph. Most editors allow you to do that.

[Jumaworks]

9 hours ago, GreenSock said:

You can't just point at an entire <svg> file and tell it to morph into another entire <svg> file, no. Each morph occurs on a single <path> element (it's animating the path's "d" attribute). Does that answer your question? 

 

If all your artwork in a particular <svg> has a single fill style, then you should be able to merge all the paths into a single <path> that you could morph. Most editors allow you to do that.

Got it, that's what i was wondering. Thank you so much, have a nice dayy ☺️