rcneil Posted April 22, 2021 Share Posted April 22, 2021 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 Link to comment Share on other sites More sharing options...
Solution GreenSock Posted April 22, 2021 Solution Share Posted April 22, 2021 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? 3 Link to comment Share on other sites More sharing options...
rcneil Posted April 22, 2021 Author Share Posted April 22, 2021 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. 1 Link to comment Share on other sites More sharing options...
rcneil Posted January 2, 2023 Author Share Posted January 2, 2023 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! Link to comment Share on other sites More sharing options...
GreenSock Posted January 2, 2023 Share Posted January 2, 2023 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! 1 Link to comment Share on other sites More sharing options...
rcneil Posted January 3, 2023 Author Share Posted January 3, 2023 Man, you were 100% correct again! I had 3.2.6. Updating to 3.11.4 resolved the issue. 1 Link to comment Share on other sites More sharing options...
GreenSock Posted January 3, 2023 Share Posted January 3, 2023 Nice! Glad you figured it out and it was as simple as updating. Thanks for letting us know. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now