Different morphing behavior between MorphSVGPlugin and kute.js

[Byron Shi]

Hi, there. I'm doing an effect that keeps morphing paths between 2 shapes. At first I tried MorphSVGPlugin, the result seems ok, but a little weird near the polygon corners. So I switched to kute.js, what I used to use for svg morphing. Then the result seems perfect.

 

I'm not saying that one is better or worse. I'm just curious why is the behavior different and is there an option or method that I can use on the MorphSVGPlugin so that it can morph the way kute.js does? Thanks.

 

See the Pen LYXwqBL by byronshi (@byronshi) on CodePen

[Rodrigo]

Hi @Byron Shi and welcome to the GreenSock forums!

 

Thanks for being a Club GreenSock member and supporting GreenSock! 💚

 

This boils down mostly to preparing your shapes. Normally a circle (shape), when is converted to a path it has only four anchor points (top, bottom, left and right) while the shape you have (hexagon) has 6 anchors, so the MorphSVG plugin has to remove those extra points and move the paths accordingly.

 

The best solution is to create your circle, add those extra points and remove the ones that are not needed so it ends up looking like this:

In the image you can see te gray squares, those are the anchor points of the circle and they match the hexagon's anchors perfectly and here is the result:

See the Pen VwqZwwX by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[Rodrigo]

Hi,

 

A little correction:

 

The MorphSVG plugin doesn't remove the anchor/control points, it moves them to match the target path's anchors/control points. So in the case of your example what is happening is that as the plugin is morphing the path, is moving the points to the final position, that's why you're seeing that sort of rotation in your particular example.

 

Happy Tweening!

[GreenSock]

Yep, and just to show you where the anchor points were, here's a fork that makes the path editable: 

See the Pen BavBjNK?editors=0010 by GreenSock (@GreenSock) on CodePen