How to rotate parent circle's child circles so that their 90 degree is towards the center point of parent circle that is origin (0, 0) in js and math.

[Owais1723]

I have one big circle and I have small circles around it as it children now I am facing an issue is their angle rotation I want to rotate the children's circles so that their 90 degrees are towards the center of their parent circle which is (0, 0). how to do that if given the x and y of each child circle.

I have provided the codepen please check it out its not that big but am poor in maths.

 

 

 

 

See the Pen OJaympa by Owais-Ahmad (@Owais-Ahmad) on CodePen

[mvaneijgen]

Our own @Carl just did a great in-depth tutorial about transformOrigin check it out. I think it is exactly what you're looking for

 

 

[Owais1723]

15 minutes ago, mvaneijgen said:

Our own @Carl just did a great in-depth tutorial about transformOrigin check it out. I think it is exactly what you're looking for

 

 

transform origin solved thanks, But can you please check out the main problem which is finding the angle on which to rotate the child so that its 90 deg is towards the center of the parent circle

[mvaneijgen]

That is just 45 deg right? Or the amount spaces you have? You have 8 spaces in your sketch 360 / 8 = 45. Then starting from 0 * 45 = 0, 1 * 45 = 45, ... 3 * 45 = 135, ect. 

 

See the Pen zYMvzPj?editors=1011 by mvaneijgen (@mvaneijgen) on CodePen

[Carl]

@mvaneijgen is exactly right. I cover this type of layout extensively in my GSAP courses.

 

This demo shows how you can put child elements in a parent, shift the position of the child, and rotate the parent to get the circular disctribution.

 

See the Pen 9e81098ef5a1de7a45d3b3a284242be1?editors=0010 by snorkltv (@snorkltv) on CodePen

 

Here a negative "counter-rotation" is applied to each child element so that all the children are upright 

 

See the Pen KKrdXKY?editors=0010 by snorkltv (@snorkltv) on CodePen

 

And of course this is all necessary when building a ferris wheel

 

See the Pen RwKOrVb by snorkltv (@snorkltv) on CodePen

 

[Owais1723]

4 hours ago, mvaneijgen said:

That is just 45 deg right? Or the amount spaces you have? You have 8 spaces in your sketch 360 / 8 = 45. Then starting from 0 * 45 = 0, 1 * 45 = 45, ... 3 * 45 = 135, ect. 

 

 

 

Shukran Habibi❤️

[Owais1723]

2 hours ago, Carl said:

@mvaneijgen is exactly right. I cover this type of layout extensively in my GSAP courses.

 

This demo shows how you can put child elements in a parent, shift the position of the child, and rotate the parent to get the circular disctribution.

 

 

 

 

Here a negative "counter-rotation" is applied to each child element so that all the children are upright 

 

 

 

 

And of course this is all necessary when building a ferris wheel

 

 

 

 

Its really helpul Thanks for you precious answer❤️