MotionPathPlugin: Align Item to Array-based path

[robs 9 Likes (Newbie)]

Hi,

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,

Robert

 

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

[mvaneijgen 1,746 Likes (Superhero)]

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. 

[robs 9 Likes (Newbie)]

Thanks, @mvaneijgen for the hint with the MotionPathHelper.

However, at the end the path should consist of random coordinates that are computed during runtime. So I can't just use a fixed svg-path.

[Cassie 5,411 Likes (Superhero)]

You can still do that by appending to the DOM.

 

See the Pen yLpwERv?editors=1010 by GreenSock (@GreenSock) on CodePen

 

The motion path helper is just for editing really.

[robs 9 Likes (Newbie)]

Thanks, @Cassie,

 

I guess in that case I need to convert the array into a path (via arrayToRawPath()) first and then attach it to the DOM?

I'll try that...

 

[robs 9 Likes (Newbie)]

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:

[OSUblake 18,497 Likes (Superhero)]

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, {
  motionPath:{
    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.

https://greensock.com/docs/v3/GSAP/gsap.getProperty()

 

[robs 9 Likes (Newbie)]

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.

[PointC 14,429 Likes (Superhero)]

 autoRotate: 180,

Happy tweening.

 

[robs 9 Likes (Newbie)]

Ups, that solution looks like I could have found it in the docs 😬. Sorry for that and thanks, @PointC!