Misaligned MotionPath Trace

[rcneil]

I'm using the MotionPath plugin and it seems to be doing exactly what I need with a slight hiccup.  It is tracing the path perfectly, but it appears to align my animating object at the start of the SVG viewbox rather than on the actual path itself.  Is there something I am doing incorrect?  Adjusting the animating object via CSS whether "left" or "translateX" does not work.  I would think "alignOrigin" should stay centered.  Am I supposed to set a "offsetX" property here or am I actually configuring this incorrectly in the first place?

 

Thanks for the help!

See the Pen YzNdPOQ by rcneil (@rcneil) on CodePen

[GreenSock]

The path data seems to be malformed. I'm curious where you got that <path>. Typically the data starts with "M" followed by an x,y coordinate. Yours, however, starts with "m" (lowercase) and only has ONE coordinate. I've never seen that before! 

 

Simple solution: make your path data conform to the more common standards

 

You could use SVG OMG. Here's a fork with the path data corrected with that tool: 

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

 

Better? 

[rcneil]

Ah!  That makes sense.  I actually used Inkscape to draw the SVG.  Just opened up a new file, grabbed the "Pen Tool" and drew it up.  Wonder why the path data markup is so malformed from that.  It always renders as expected in the browser but it sounds like it isn't correct.  

 

Either way, thanks for troubleshooting!  Very appreciated. 

[rcneil]

Figured I would tie back into this thread considering I ran into the same problem on another SVG and maybe someone will stumble upon this.  Strangely, again through Inkscape I am receiving path data like this:

 

<path id="line1" stroke-dasharray="8.99887, 14.9981" stroke-width="3.999" d="m614.2 2-335 358.38" mask="url(#dash-mask-1)"/>

In spite of running it through SVGOMG or any other resource, the path data is always formatted like this.  When using it with the MotionPath Plugin, it has trouble with this malformed SVG data.  Technically, it should be like this, with a space between the second negative X value:

 

<path id="line1" stroke-dasharray="8.99887, 14.9981" stroke-width="3.999" d="m614.2 2 -335 358.38" mask="url(#dash-mask-1)"/>

There were a few paths I had in my SVG where no space existed between the first X,Y point and the second X,Y point if the X was a negative value.  I guess it got treated like a hyphen.  Not sure.

 

Even more strange, I was using a CodePen to troubleshoot and it had no trouble with this original syntax.  It was only when I moved it into production that the MotionPath path became misaligned, though there were far more elements at play and the order with which the code was served may have been different (i.e. the Javascript came before the HTML, or vice-versa, etc).  

 

See the Pen KKBzBYd by rcneil (@rcneil) on CodePen

 

Hope this helps someone in the future! 

[GreenSock]

5 hours ago, rcneil said:

Even more strange, I was using a CodePen to troubleshoot and it had no trouble with this original syntax.  It was only when I moved it into production that the MotionPath path became misaligned, though there were far more elements at play and the order with which the code was served may have been different (i.e. the Javascript came before the HTML, or vice-versa, etc).  

Are you absolutely positive that you were using the latest version of GSAP (MotionPathPlugin) in production? I wonder if you just had an old one. 

 

Is there any chance you could provide a minimal demo that illustrates the broken behavior with the latest version of MotionPathPlugin? If there's a problem, we'd definitely like to fix it. Thanks for circling back!

[rcneil]

Man, you were 100% correct again!  I had 3.2.6.  Updating to 3.11.4 resolved the issue.  

[GreenSock]

Nice! Glad you figured it out and it was as simple as updating. Thanks for letting us know.