Jump to content


Translate animation using a curved path

Go to solution Solved by GreenSock,

Recommended Posts


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!


Link to comment
Share on other sites

  • Solution

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 :)



  • Like 1
Link to comment
Share on other sites

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!

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