Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
puffywuffer

Morph SVG polygon problem

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.
×