MorphSVG - How to convert one shape into multiple smaller pieces?

[axy2016]

Hello,

 

I have a square that I want to morph into three circles.

Is it possible to morph one shape into multiple smaller ones in one transition - versus having it transform into each individual shape?

The Codepen I've included has a square that transforms into one blue circle - but the actual 'whole' shape is three circles lined up.

 

Thank you!

 

tl = new TimelineMax({});

MorphSVGPlugin.convertToPath("circle, rect")

tl.to("#red", 1, {morphSVG:"#blue", fill:"#0000FF", ease:Back.easeOut.config(1), y:0}, "+=0");

 

See the Pen bEmWPe by anon (@anon) on CodePen

[PointC]

Hi axy2016 ,

 

Welcome to the forums.

 

The MorphSVG plugin works path to path - so to make a square morph into three separate circles, you'd have to make your three circles into a single path and I don't think you're going to get the quality you'd like by doing it that way. To get the best results with the most control, I'd say you want to stay with a path to path process.

 

You can make your three initial shapes look like a solid square and then morph to three circles. I made a pen to show you how that could work.

See the Pen yeRXRx by PointC (@PointC) on CodePen

 

I used 2 small squares and a rectangle to create the illusion of one large square and then grouped those three elements so I could control them as if they were just one element. Those three pieces then morph into the circles. The only problem I ran into was that I could see the edges of the three elements making up the 'fake' square even though the positioning was perfect. I solved this by adding a stroke to those paths that matched the background color.

 

I'm not sure what your project is, but hopefully this helps or gives you some ideas.

 

Happy tweening.

[Carl]

Great demo, Craig.

 

Yes, I think you are right that doing the extra work of breaking apart the square will give you the best control.

 

For kicks, I did a quick job of splitting one square into 3 circles and it's actually pretty good:

 

http://codepen.io/GreenSock/pen/qbJXVq

[PointC]

Thanks Carl.

 

I actually made something similar to your demo when I first started working on an answer for this post, but switched back to the multi-path route for better control.