MotionPath object animates but not on the actual path?

[Etetherin 0 Likes (Newbie)]

I am trying to use MotionPath to animate along a path and it is getting the correct data for how it should move but is not actually on the path which is what i need. The code pen shows this issue. The ship "orbiting" should follow and be on the red path. 

See the Pen VwLmEqJ by Etetherin (@Etetherin) on CodePen

[Etetherin 0 Likes (Newbie)]

This is my first post so if all these people who have viewed this are not helping me because of some thing I did wrong during posting please feel free to let me know.

[GreenSock 18,255 Likes (Superhero)]

Nah, you didn't do anything silly - this is just an interesting edge case that I'm looking into because the "align" feature isn't working correctly with your <svg> element. Gimme a little time to get back to you. 

[Etetherin 0 Likes (Newbie)]

Ok thank you

[Etetherin 0 Likes (Newbie)]

1 hour ago, GreenSock said:

Nah, you didn't do anything silly - this is just an interesting edge case that I'm looking into because the "align" feature isn't working correctly with your <svg> element. Gimme a little time to get back to you. 

So does that mean its not necessarily something that I am doing wrong then?

[Etetherin 0 Likes (Newbie)]

Idk if this works like other forums, but I am still trying to fix this. Its for something that I have to do user testing on within the next 32 hours so if someone wants to help bail me out and help get it working its so much appreciated.

[GreenSock 18,255 Likes (Superhero)]

I've been working in this for hours and hours, basically ever since you posted. It has to do with browser quirks related to <svg> root elements. I hope to find a workaround that I can put into the plugin itself, but for now you've got a few options: 

1. Instead of animating the <svg> element, just wrap that in a <div> and animate that. Make sure you use GSAP 3.2.0 or later, and tap into the new alignOrigin feature. 
2. Or you can just offset the positioning using offsetX and offsetY. In your demo, it looks like -145 for each of those lines things up. 

Here's a demo with solution #1: 

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

 

Does that help? 

[GreenSock 18,255 Likes (Superhero)]

Alright, after many hours, I think I've got a solid solution baked into the next release of MotionPathPlugin that accurately works around the various quirks and challenges with aligning root <svg> elements. Here's a preview file you can test if you'd like: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MotionPathPlugin.min.js

 

I forked your demo and dropped it in. Seems to work well: 

See the Pen 51f8d67418ee6776a024d636ef932850 by GreenSock (@GreenSock) on CodePen