Jump to content
GreenSock

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

MotionPathPlugin: Align Item to Array-based path

Recommended Posts

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

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

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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...

 

  • Like 1
Link to comment
Share on other sites

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:

image.png.967a2066f2a2bc839e0b1dfcced83f19.png

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, {
  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()

 

  • 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

 autoRotate: 180,

Happy tweening.

:)

 

  • Like 4
Link to comment
Share on other sites

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

  • Like 1
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.
×