Jump to content


SVG morph problems

Recommended Posts



In the attached codepen, i have two SVGs i've exported from illustrator.

Both were exported as svg code and the first thing i do with greensock is convert to paths.


I want the first (the vertical line) to be morphed into the second (the arrow shape).

The idea is that it will be like the bow on a bow and arrow being pulled back.


For some reason it just doesn't seem to work for me, any guidance would be appreciated.




See the Pen ZOyybA by JonnyS (@JonnyS) on CodePen

Link to comment
Share on other sites

It looks like the issue is that you're trying to morph it into two separate paths.  If you merge your paths in Illustrator, it should work fine.

  • Like 4
Link to comment
Share on other sites

Yup, Ohem is exactly right. You need to morph 1 start path to 1 end path.


In illustrator you can select both end paths, right click and choose "make compound path"

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