MorphSVGPlugin.pathDataToBezier Error: Malformed Data for Line to be Traversed

[jstafford]

function getBoatTimeline() {

 

     var traversePath = getSvgPath("hill", "traverse-path");

     var bezierData = MorphSVGPlugin.pathDataToBezier(traversePath);               

     TweenMax.to($("#boat-container"), 2, {bezier: {values:bezierData, type:"cubic"}, ease:Linear.easeNone, repeat:-1, yoyo:true});

 

     ....

}

 

------

 

I am trying to do the following: http://greensock.com/forums/topic/13220-animating-along-a-path/  I usually post with reduced examples of my questions using codepen, but due to the context of my question, I am unable to for this one (maybe I will think of a way to do later), but I have thoroughly documented my problem with code and errors. I am working with an external svg getting and retrieving it successfully and passing it as path data to the MorphSVGPlugin.pathDataToBezier where it complains of the following:

 

"WARNING: invalid morph to: undefined, ERROR: malformed path data: false"

 

 

when evaluated in my console, traversePath is equivalent to the following:

 

traversePath --> <g id=​"traverse-path">​<line class=​"st0" x1=​"0" y1=​"238.8" x2=​"1153" y2=​"299.3">​</line>​</g>​

 

My svg consist of two layers. One layer is a polygon with fill and the other is a line that I was hoping to traverse.

 

 

 

I noticed that d is absent here, but why is illustrator not giving my line data attributes? Is this the problem?

 

Any help appreciated.

 

Thanks.

 

John

See the Pen 13220-animating-along-a-path by forums (@forums) on CodePen

[jstafford]

Update:

 

Been playing around with generating a better svg file for the MorphSVGPlugin to use.

 

This worked.

 

<?xml version="1.0" encoding="utf-8"?>

<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

<svg version="1.1" id="hill" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

viewBox="0 0 1153 326" style="enable-background:new 0 0 1153 326;" xml:space="preserve">

<style type="text/css">

.Drop_x0020_Shadow{fill:none;}

.Round_x0020_Corners_x0020_2_x0020_pt{fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;}

.Live_x0020_Reflect_x0020_X{fill:none;}

.Bevel_x0020_Soft{fill:url(#SVGID_1_);}

.Dusk{fill:#FFFFFF;}

.Foliage_GS{fill:#FFDD00;}

.Pompadour_GS{fill-rule:evenodd;clip-rule:evenodd;fill:#44ADE2;}

.st0{fill:#3A393B;}

</style>

<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="0.7071" y2="0.7071">

<stop  offset="0" style="stop-color:#DEDFE3"/>

<stop  offset="0.1738" style="stop-color:#D8D9DD"/>

<stop  offset="0.352" style="stop-color:#C9CACD"/>

<stop  offset="0.5323" style="stop-color:#B4B5B8"/>

<stop  offset="0.7139" style="stop-color:#989A9C"/>

<stop  offset="0.8949" style="stop-color:#797C7E"/>

<stop  offset="1" style="stop-color:#656B6C"/>

</linearGradient>

<path id="traverse-path" class="st0" d="M1153,326C809.5,327.2,0,227.2,0,227.2V326H1153z"/>

</svg>

 

However, it is a polygon and instead of going down the ramp like I want it goes around the polygon perimeter.

 

So, I created a curved line that does have data attributes. Polygon only provides background shaded object, not traversed.

 

<?xml version="1.0" encoding="utf-8"?>

<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

viewBox="0 0 1153 326" style="enable-background:new 0 0 1153 326;" xml:space="preserve">

<style type="text/css">

.Drop_x0020_Shadow{fill:none;}

.Round_x0020_Corners_x0020_2_x0020_pt{fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;}

.Live_x0020_Reflect_x0020_X{fill:none;}

.Bevel_x0020_Soft{fill:url(#SVGID_1_);}

.Dusk{fill:#FFFFFF;}

.Foliage_GS{fill:#FFDD00;}

.Pompadour_GS{fill-rule:evenodd;clip-rule:evenodd;fill:#44ADE2;}

.st0{fill:#3A393B;}

.st1{fill:none;}

</style>

<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="0.7071" y2="0.7071">

<stop  offset="0" style="stop-color:#DEDFE3"/>

<stop  offset="0.1738" style="stop-color:#D8D9DD"/>

<stop  offset="0.352" style="stop-color:#C9CACD"/>

<stop  offset="0.5323" style="stop-color:#B4B5B8"/>

<stop  offset="0.7139" style="stop-color:#989A9C"/>

<stop  offset="0.8949" style="stop-color:#797C7E"/>

<stop  offset="1" style="stop-color:#656B6C"/>

</linearGradient>

<g id="hill">

<path class="st0" d="M1153,326C809.5,327.2,0,227.2,0,227.2V326H1153z"/>  <!-- shaded polygon, not traversed -->

</g>

<g id="traverse-path">

<path class="st1" d="M0,227c0,0,838,102,1153,99"/>  <!-- this was a simple curved line drawn with pen tool -->

</g>

</svg>

 

But I get a malformed data error again when trying to traverse only the curved line. Why will it let me traverse the polygon and not the curved line?

[GreenSock]

A few things come to mind:

1. A <g> doesn't have path data, nor does a <line>. pathDataToBezier() only works for <path> elements. 
2. You can convert a basic shape like <line> or <circle> to a <path> using MorphSVGPlugin.convertToPath("#yourElement"). This does NOT work for a <g> because that's just a group that could contain all sorts of other elements (it's like a wrapper). So in your case, you'd just target that <line> inside the <g id="traverse-path"></g>. Carl has a video showing how to use the convertToPath() function here: http://greensock.com/morphSVG (scroll down to the 2nd video)
3. Make sure you're using the latest version of MorphSVGPlugin (0.7.0 as of today).
4. It'd be really, really, REALLY helpful if we could see a codepen demo so that we can identify what's going on in your code. It's just so hard to troubleshoot blind. I know you said you usually provide codepens but for some reason you can't in this case. If you're worried about confidentiality for your client or something, just please create a reduced test case without your client's actual artwork. All we need is the most basic thing that shows the issue happening and I'm confident we can get you an answer quickly. 

[GreenSock]

I pasted your SVG into a codepen and added the bezier tween - seems to work fine for me. 

http://codepen.io/anon/pen/rxNVdB

 

Is that what you're looking for? 

[jstafford]

Yep. That's it. I am fairly sure my problem is I am targeting the group wrapper around the path (the id="traverse-path" is on the group wrapper), not the path itself. I am planning to look at it tomorrow morning again. But you are targeting the class specific to my path I want to traverse. That's my problem. Sure of it now. Code is at work so I will look at tomorrow morning. Thanks Jack!