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

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

[MorphSVG: Morphing more than 2 objects not working]

Hi,
 

After reading the documentation on how to morph more than two objects, it seemed like the code wasn't any much longer.

However I'm wondering if I'm missing anything within my code that is preventing that, as the shapes only morph from the first to the second and gets stuck there. It doesn't move on to the third shape.

 

 

Thank you - I really appreciate it!

TweenMax.to(pink, 2, {morphSVG:"#red", fill:"#ED1C24"}, "+=1")
.to(pink, 2, {morphSVG:"#black", fill:"#000000"}, "+=1");

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

[MorphSVG: How to change fill color?]

Hello,

 

I was following along with the MorphSVG demo, and was wondering how you would change the color of the second shape?

Both shapes have their own color, but the morphing keeps it at the #start fill color.

 

 

Thank you!

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