Jump to content
Search Community

Moving a html element along an arc

orendacc test
Moderator Tag

Go to solution Solved by PointC,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi, I'm new to gsap and I was wondering if its possible to move a dom element along an arc (circular or elipsoid) using gsap. In jQuery, I would achieve this using a step function passed to animate() and applying some basic goniometry to the 'left' and 'top' css attributes of the given element. However, I've been digging around the internet for some time, unable to find an equivalent solution done in gsap. I know there is the onUpdate function, but it didn't seem to me its intended to be used this way (at least I think that updating the css style of the moved element repeatedly wouldn't be much better to the overall performance than the jQuery way)

Link to comment
Share on other sites

  • Solution

Hi orendacc :),


Welcome to the forums. 


You should have a look at the pathDataToBezier() method of the MorphSVGPlugin. It converts path data into points that you can use as a motion guide. So not only can you make something follow an arc, but pretty much any type of motion you'd like.


Here's some more reading about it:



Here's a CodePen to see it in action:

See the Pen 550e4b59c59355eef809658fbce77ee9 by GreenSock (@GreenSock) on CodePen


Hopefully that gets you started. Happy tweening.


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