Jump to content
Search Community

Different morphing behavior between MorphSVGPlugin and kute.js

Byron Shi test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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!

  • Like 4
Link to comment
Share on other sites



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!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...