Jump to content


Morph Curved Shape into Straight Rectangle

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 just started trying to work with the MorphSVG plugin and feeling like I must be missing something. Not working out quite as simply as expected. I have a basic S curve type shape that I want to animate into a straight edged rectangle. I'd like it to just smoothly iron out the curves until it goes straight but when I try this out it does a weird flip animation from one shape to the other. I'm exporting my SVG paths from Adobe Illustrator since it gives me a lot of control over how the path is drawn but I don't work with SVG much so this might be part of the problem. Any help to push me in the right direction to achieve this is greatly appreciated!

Screen Shot 2017-11-24 at 11.14.02 PM.png

See the Pen JOZqej by JLernDesign (@JLernDesign) on CodePen

Link to comment
Share on other sites

This is one of those very unusual cases when the default morph doesn't look quite right. And actually, the way you've got your anchor points configured in your original artwork makes it almost impossible to deliver the result you're after. But first, let me make sure that you know about the findShapeIndex() utility; it lets you play around with how the anchor points match up between the start and end shapes:


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


Notice you can just feed in the two elements (or selector text) and it'll do it all for you, and you click the +/- buttons to change between index numbers. 


To solve the problem, I'd recommend tweaking the anchor point placement in your artwork. Visualize where they'd map to each other. Typically this isn't necessary, but you happen to have a few shapes that just don't match up well at all. You could try literally adding 3 to 8 points (totally guessing). The shape doesn't need to change at all - I'm only talking about inserting some anchor points seamlessly. Illustrator makes that simple. 


Let us know if that works for you. I think you'll find that 95% of the time, the default morphing "just works" and looks intuitive.


  • Like 6
Link to comment
Share on other sites

Ah that's exactly what I was looking for @mikel. Thanks for showing me that. I'll keep that in mind moving forward. 

  • Thanks 1
Link to comment
Share on other sites

Just to throw my two cents worth out there for you -- MorphSVG is absolutely amazing and one of the best parts is not needing the same number of start and end points. That being said, if you carefully prepare your artwork and use the same number of points as often as possible, it will help the plugin and you'll experience far fewer surprises.


That's what I did on my recent "Need for Speed" demo. I started with text turned into paths and used a duplicate set of those paths to push and pull their points into the shape of the car. Most of the letters use the same number of start and end points, but I did have to add a few to match some of the curves.


See the Pen yPbYRY by PointC (@PointC) on CodePen

Happy tweening and morphing.


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