Jump to content
Search Community

Morph SVG polygon problem

puffywuffer test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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


Link to comment
Share on other sites

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.



  • Like 2
Link to comment
Share on other sites

  • Sahil changed the title to Morph SVG polygon problem

@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? 

  • Like 3
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...