MorphSVG: Morphing more than 2 objects not working

[axy2016]

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

[PointC]

Hi axy2016  ,

 

You just need to switch to a timeline rather than trying to chain those tweens like you have it there. If you switch your code to this:

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

it all works perfectly.

 

PS Here is a little pen I was goofing with recently that shows a loop of multiple morphs in the middle of other tweens.

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