Moving an element along a custom path

[tom_codes_things]

Hey all,

 

I'm rather new to GreenSock. I've watched a couple of the introduction videos on the docs and searched around specifically for an answer to this question but seem to be getting a little lost, so I apologise in advance if this is an obvious question.

I have an object which I'm trying to move along a specified path (as seen in the image) and was wondering if Greensock had something to assist with moving objects along a custom path a little easier than me typing in coordinates.

 

The final destination is

position: fixed;

and therefore is always in the same place (ref: end of the line in the image). The starting point (ref: circle in the image) can vary in position on the page.

 

 

[Sahil]

You can do that by using MorphSVGPlugin, which you will need to convert path data into bezier. Then you can move your element along the path.

 

Check animate along the path section in the end of docs https://greensock.com/docs/Plugins/MorphSVGPlugin

 

See the Pen vRKBmP?editors=1010 by Sahil89 (@Sahil89) on CodePen