Translate animation using a curved path

[MisfitDeveloper 1 Likes (Newbie)]

Hello,

I am currently trying to apply a simple translate animation between two points however, instead of taking a straight line I want it to take a curved path.  For example, given the image below I want to move the item from A to B taking a curved path through the point C (A to C and C to B are mirrored if it simplifies things) I was just wondering if this is possible to achieve this using gsap?

Any help is greatly appreciated, thank you!

[GreenSock 18,228 Likes (Superhero)]

Of course! That's what MotionPathPlugin is for.

 

Or you could "fake" it by using two tweens with different eases - the vertical ("y") tween could use an "out" ease like "power1.out" and the horizontal ("x") tween could use ease: "none", but that will obviously affect the overall motion/pace of the target. So MotionPathPlugin gives you by far the most flexibility. 

 

A 3rd option is to use Math.cos() and Math.sin() to plot the interpolated x/y coordinates if the curve is just the outer edge of a true circle. 

 

Lots of options

 

Enjoy!

[MisfitDeveloper 1 Likes (Newbie)]

Just took a look at the MotionPathPlugin docs and I think this is what I'm looking for, am going to give it a go

Thank you so much!