how to convert cx and cy of a circle to start value of motionPath with MotionPathPLugin?

[nightcoder]

hello there!

i'm trying to achieve something simple but i don't how to.

I would like the white dot to start its course at its cx and cy coordinates. But the thing is that start and end take a value between 0 and 1 with 0 being the beginning and 1 end of the path. So how can i convert my cx and cy coordinates to a value between 0-1 to make it the start of the animation along the circle path?

What is the best approach to achieve that?

 

Also, i chose cx and cy of the white dot manually/visually but is there a motionPathPlugin method that would allow me to get x and y coordinates on the circle? so i would choose in that range and not play around with numbers manually like that.

I saw there are many interesting motionPathPlugin methods but what would be the best approach here? 

The end goal is to position my dot wherever i want on the circle and then animate it from that point.

 

Thank you for your help!

codepen is attached (tween is paused so you can see the white dot starting point i want for now)

See the Pen qBKrmNd by newnightcoder (@newnightcoder) on CodePen

[Trapti]

Hi, 

Your CodePen is not accessible. if I can see the pen working then it would be better. But here are a few points after reading the description.

- If you want a dot to move on a circle. In the motionPath, there are two properties "start" and "end" using these two properties you can adjust the start and end of a moving dot. 
- Also, there is align and alignOrigin property you can use for adjusting the dot. 

 

 

[nightcoder]

yeah i just fixed it! the pen is now working. sorry for that 😅

so i know about start and end etc... the question is : how to convert cx and cy to have the white dot start at that point on the circle?

[mvaneijgen]

You had a typo in your code, MotionPathPLugin instead of MotionPathPlugin. I've also move around your code a bit, because I found the typo after I moved things around.

 

Hope it helps and happy tweening! 

See the Pen PoapmbJ?editors=1111 by mvaneijgen (@mvaneijgen) on CodePen

[nightcoder]

thank you! i saw the typo and fixed it but thank you! 
but the question remains : how can i convert the cx and cy coordinates of the white dot to a value between 0-1 to make it the start of the animation along the circle path?

What is the best approach to achieve that?

[mvaneijgen]

Ah, I see. I opened the broken pen and saw it not working, so my mind jump directly to "oh that is the problem, let me fix it". 

 

Personally I would draw the shape in my design program and have it start position be the start position I want, so that I start with a correct path instead of having the circle element that needs to be converted to a path and then the starting position is what ever it thinks it is. 

 

If you want it be a circle and convert it this way, you can do a few things (but that is only easy if you want it to start at the top of the circle) rotate the circle -90deg or set the start position to be-0.25 and the end be 0.75. I don't know of any fancy ways to calculate these positions, because the cx and cy can be any point within SVG space, that have nothing to do with the circle.

 

Again personally I would fix the file is start with to be perfect, so that I only have to focus on the animation at hand and not fiddle with what MotionPathPlugin.convertToPath(circle) thinks  of  how a circle should be broken up. 

 

See the Pen bGKqWKx by mvaneijgen (@mvaneijgen) on CodePen

[nightcoder]

16 minutes ago, mvaneijgen said:

because the cx and cy can be any point within SVG space, that have nothing to do with the circle

yes i see what you mean.. that's why i said i found those coordinates manually by trying/missing/trying again until it was on the circle.
what i want to achieve in theory is:

1- i have a circle

2- i want to place a dot (or several dots) along the path of the circle (=start position of the dot for its animation)

3- animate the dot(s) from their start position on the circle.

For now i only know how to use a value between 0 and 1 (or in a range of 1, like 0.4 - 1.4 or -0.25 - 0.75 like you said).
I would like to be able to place the white dot wherever i want on the circle path (using the white dot's cx and cy coordinates i think? but maybe not a good idea i'm not sure) and then make that very specific position the "start" of the motionPath animation for the dot.

Hence my question: is there a method to convert coordinates into a value between 0-1...
I will see what i can do with getPositionOnPath() method.

 

And thank you for taking the time to reply to me!

[nightcoder]

I found the solution using the getPositionOnPath() method as shown in the docs!!! so cool!

here is the codepen link with correction. i did it quickly cause i'm implementing that in a bigger project with nextjs etc... but just to get the idea!

hope this will help someone ! happy tweening yall!

(oh and if a gsap Jedi has some recommandations and stuff or a better approach, please let me know. as i said i implemented it in a react18 component and i use useState and isoMorphicLayoutEffect to keep track of all the values returned along the way etc... and it works smoothly sofar)

See the Pen qBKrXJz by newnightcoder (@newnightcoder) on CodePen