MorphSVG Not Working - What did i do wrong?

[foxhound3311]

Hey guys,

 

I just joined the club membership program to unlock the features of MorphSVG. I've been just trying to follow the basic lessons to see if I can even get the plugin to work. Sadly it is not.

 

My rect was turned into a primitive shape, and I read that MorphSVG plugin cannot work with anything but paths. I used the "converToPath" script successfully turning my shapes into paths. Sadly they are still not morphing.

 

Could someone please take a look at my codepen and let me know? 

 

Thank You  

See the Pen yMOJXZ by stinkytofu3311 (@stinkytofu3311) on CodePen

[PointC]

HI foxhound3311 

 

Welcome to the GreenSock forum and thank you for joining Club GreenSock.

 

You're really close. Just a couple small mistakes.

 

1. There is a typo in your tween. It's TweenMax, not TeenMax. 

2. #end is a group. You need to target the path in that group which has a class of .st1

// switch this
TeenMax.to("#start", 2, {morphSVG:"#end"});

// to this
TweenMax.to("#start", 2, {morphSVG:".st1"});

If you make that change, it should start working correctly.

 

Happy tweening and welcome aboard.

[foxhound3311]

Thank you so much PointC! That fixed the problem.

 

I was hoping you could look at this next problem I'm experiencing now. I attached a findShapeIndex to the SVG because I noticed it was morphing oddly. It seems that my index point is slightly off-centered which is causing the weird morph. Do you have any advice to avoid this issue? 

[PointC]

o.k. - I see what's happening.

 

Your .st1 path is only a stroke of a star shape that was turned into a compound path. It has no fill which is why the morph looks odd. You can see what I mean by turning off your rectangle and setting a fill on the star shape. Just pick something bright so it's obvious. See how only the outline is filling? It's technically a path, but looks like a stroke. The morphSVG plugin is doing its work correctly, but it's basically morphing from a filled rectangle to an outline of a star. You'll need to redo the star path to get this to look right. 

 

Please give that a try and let me know if you have any more difficulty.

 

Happy tweening.