Jump to content
Search Community

MotionPathPlugin: Align Item to Array-based path

robs test
Moderator Tag

Recommended Posts


I'm having problems aligning an element to the path in the motionPathPlugin.

If I use an array of coordinates as motionPath I'm not able to align the animated div to the path.

I would like to have it look just as the blue svg rect.

If I set "align" to true the result is even worse. 

Furthermore for some reason the animation doesn't stop repeating, although I have set the repeat property to 5.


What am I doing wrong?


Thanks so much,



See the Pen yLpwvBg by rob83 (@rob83) on CodePen

Link to comment
Share on other sites

Having the `MotionPathHelper.create()` will repeat the animation indefinitely. 


If I copy the path with the motion path helper and place it in a SVG within the HTML I can perfectly align it with the element. I don't know where the motion path helper places a path when it is only defined in code.


See the Pen OJzqZGK?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen


I think the path defined in code gets placed underneath the starting position of your `div`, but the helper will just put it somewhere close. 

  • Like 1
Link to comment
Share on other sites

12 hours ago, robs said:

So far it works well. However I still have one question: how can I determine that the div is autoRotating without flipping the div upside down? Like this:


I'm not sure what you mean by this. It will autoRotate if you set it to autoRotate.

gsap.to(div, {
    path: "#path",
    align: "#path",
    autoRotate: true, // it's rotating
    curviness: 1.5,
    alignOrigin: [0.5, 0.5]


If you need to check the actual rotation value, you can use gsap.getProperty() at any time.



  • Like 1
Link to comment
Share on other sites

Sorry, maybe it's easier if I use the real example:

See the Pen ExoBWba by rob83 (@rob83) on CodePen

The fly in the codepen should start flying from the right border of the screen.

Now the problem is: if I auto-rotate the fly it flies backwards. I know I could just change the SVG and flip the fly in there, but I thought maybe there another solution in which I can just keep the SVG as it is and tell GSAP to flip the fly during auto-rotation.

Link to comment
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.
  • Create New...