Animate to a specific position on a circle path

[Saif]

Hey everyone,

 

I'm new to Gsap so forgive me if I mistake any technical terms.

 

My animation is  two-fold, first to animate a dot from wherever it may be in the document to a specific point on the circle path (for instance the halfway point in the path). Second, upon reaching the point on the circle path, an animation of following the circle path infintely.

 

What I attempted to do was get the rawPath of the path and then getPositionOnPath to get the the co-ordinates of the halfway point of the path, however the co-ordinates appeared to be global.

 

So I then used getRelativePosition and provided the co-ordinates from getPositionOnPath which I believe made the co-ordinates local to the Path.

 

However as can be seen from the CodePen the dot does not go to the halfway point of the path (bottom of the circle).

 

Can someone kindly tell me what I did wrong? or if there is a better way to go about this?

 

Thank you in advance.

 

See the Pen jOaKzEg by Safety_guy (@Safety_guy) on CodePen

[OSUblake]

Welcome to the forums @Saif

 

It looks like the point you pass in needs to be relative to path's bounding box.

 

See the Pen wvPXNem by GreenSock (@GreenSock) on CodePen

 

[mikel]

 

Just a fun alternative:

 

See the Pen yLPEwmM by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

 

[Saif]

Thank you both very much, my animation is now functioning properly. It seems I have to brush up on some more methods and experiment

[mikel]

 

Hey Saif,

 

Successful experiments are the most fun.
The pen above has been revised again.

 

Happy trying for the better one ...

Mikel