Morph SVG polygon problem

[puffywuffer]

I'm messing around with morphSVG  in Code Pen and I'm getting some strange morphs on this after the label "C to D". The first two morphs work really well - and I'm using exactly the same process for the third but the polygons are flipping over instead of morphing in the usual way. I'm not sure whats going on.

 

See the Pen qYgjgq by puffywuffer (@puffywuffer) on CodePen

 

[Sahil]

Hi Puffywuffer,

 

That has to do with how your path is created, and what are the start end points of the path. In following demo, if you change the shapeIndex you will see that it affects they way shapes morph. You can use the findShapeIndex utility to  test which shapeIndex you want to use.

 

See the Pen YLBeOz by Sahil89 (@Sahil89) on CodePen

 

Check out the following video,

 

 

But it is great to get in habit of how you create your paths, so take a look at following post by @PointC where he explains how you can change your path's start point in illustrator.

 

 

[GreenSock]

@Sahil is totally right, but there may be a simpler solution. Part of the problem had to do with some limitations of <polygon> and <polyline> points, so try converting those to <path> elements instead which are much more flexible. Don't worry - MorphSVGPlugin makes it SUPER easy: 

 

MorphSVGPlugin.convertToPath("polygon, polyline");

 

Just run that first. Here's a fork: 

 

See the Pen 62c73a806815714c714a74d040f7f654 by GreenSock (@GreenSock) on CodePen

 

When working with <path> elements, MorphSVGPlugin will automatically select the shapeIndex that results in the points traveling the least distance overall (which is generally the most intuitive one).

 

Does that help? 

[puffywuffer]

Thanks for the help! @Sahil and @GreenSock. convertToPath really helped a lot and that post by pointC was very usefull to me also.

See the Pen RydNmE by puffywuffer (@puffywuffer) on CodePen