Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Etetherin

MotionPath object animates but not on the actual path?

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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. 

  • Like 2

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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? 

  • Like 2

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×