MorphSVGPlugin.pathDataToBezier is not a function

[billybrewster]

Hi all. Hope you can help. I haven't created a pen because this can be reproduced by just forking the morph hippo/star demo and adding the code from the example docs e.g:

 

var bezier = MorphSVGPlugin.pathDataToBezier("M37,17v15H14V17H37z M50,0H0v50h50V0z", {align:"relative"});

Uncaught TypeError: MorphSVGPlugin.pathDataToBezier is not a function

Locally I'm playing around with MorphSVG and all the other functions work (convert, rawpathto, stringto etc) but the bezier one errors out. I'm using gsap core, custom ease and morphsvg plugins. Do I need to install another to get the above working please?

 

Also your examples page for stringToRawPath has the images the wrong way round in the details section - https://greensock.com/docs/v2/Plugins/MorphSVGPlugin/static.stringToRawPath(). I think it's meant to show the rawPath example first and the resulting conversion in string form second with the preceding text saying "So the resulting string would be:". Confused me for a few moments :p.

 

Thank you!

 

 

[ZachSaucier]

Hey billybrew. Welcome to the forums and thanks for being a Club GreenSock member!

 

Based on the error it seems like you're using GSAP 3 - great! However, if you use the v3 version of the MorphSVGPlugin docs, you will notice that pathDataToBezier is not included in v3. For movement along a path in GSAP 3, you should use the MotionPathPlugin. What are you trying to accomplish? We'd love to further help point you in the right direction. 

 

As for the stringToRawPath examples, I think they are in the correct order. Unless I'm not understanding what you're saying? 

[billybrewster]

Hey Zach.  Thanks for replying :). Ah ok, I will take a look at the MotionPathPlugin. I'm creating some animations for showing chart data and wanted to curve the charts rather than have fixed lines. If I get stuck after checking out the MPP I'll be sure to ask for help :).

 

As for the docs. Here is what I mean, you have 2 functions in MorphSVG which convert a raw path from an array to a string (MorphSVGPlugin.rawPathToString) and the reverse, a function that converts a string to an array (MorphSVGPlugin.stringToRawPath). However, in the docs details section it explains what the function does e.g convert one way or the other but the images shown are in the same order which give the impression that the function converts from image a to image b. This is compunded by the text preceding the second image which says "So the resulting RawPath would be:". But there would be no resulting raw path  from using the rawPathToString function , it would result in a string.

 

It just threw me for a few seconds so i thought I'd mention it. It's probably a combination of me being dumb and tired :p. Thanks!

[ZachSaucier]

Ah, I see what you mean. We will make it more clear.