Moving a html element along an arc

[orendacc]

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)

[PointC]

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:

http://greensock.com/morphsvg-update

 

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.

[orendacc]

Thanks, seems thats exactly what I'm searching for