Jump to content
Search Community

MorphSVG malformed path data

TheTravis 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 have a pretty complex svg that I'm trying to morph and it throws the "ERROR: malformed path data: undefined" when I use the convertToPath() function. The original svg code that I got from illustrator threw the same error and the codepen has the cleaned up version I got from https://jakearchibald.github.io/svgomg/

See the Pen apaMQx?editors=1111 by travismorenz (@travismorenz) on CodePen

Link to comment
Share on other sites

Hi TheTravis :)

 

Welcome to the GreenSock forum.

 

Looks like you're trying to morph an entire group. The MorphSVG plugin works path to path rather than group to group. When you have multiple paths and ellipses like that in your start group, you need to morph to the corresponding path/ellipse in the end group. You can do that manually with multiple morphs or you can create a loop to take care of that for you.

 

I made a pen as an answer to another forum question that shows a loop for morphing that I think could help you.

 

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

 

Hopefully that helps.

 

Happy tweening and welcome aboard.

:)

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