lisartur

This is my example If you click the number 1 key, my red element will rotate to 90 degrees and the next 180 degrees, and then to 270 degrees, etc. If I press the 1 button, everything is ok, but if I press the 1 key very quickly several times my red element adopts different positions of rotation How to make it take the correct positions regardless of the speed at which the key is clicked

I have element SVG <path id="5" class="fil3" d="M20 75c13,23 32,42 55,55 23,-13 42,-32 55,-55 -13,-23 -32,-42 -55,-55 -23,13 -42,32 -55,55z"/> And if i transform this object how get x, y position?

Hi Acccent Can you look in my example I have changed your example. And almost everything is fine, but I only have a problem with the ball C. If you click 1, the big wheel turns to the left, but the C ball does not rotate by 90 degrees at the next click 1 it's already ok, the ball rotates 90 degrees. Can you help me improve this or what I need to do to rotate the sphere C?

I was changes my example But i cant correct Ball C rotated How to improve it ? Or 2 example Ball A was rotated 180 degrees is not correct, should rotaed 90 degrees

Tank you I edit in my example but how set correct ball 1 If i click key 1 and rotate left my ball 1 is not correct rotate How set transformorigin ball 1

Hi I change my example but i cant rotate E F balls Can you look in my example what now a i do mus correct How to set the E and F balls next to each other?

Thank you but im not understand how set start position I write start position but is not correct The ball A, B, C, D is set ok TweenLite.set(S('.LA')[0], {rotation: 90, transformOrigin: '100% 0%'}); TweenLite.set(S('.LB')[0], {rotation: 0, transformOrigin: '100% 0%'}); TweenLite.set(S('.LC')[0], {rotation: 270, transformOrigin: '100% 0%'}); TweenLite.set(S('.LD')[0], {rotation: 180, transformOrigin: '100% 0%'}); but how set position E,F,G,H,I,J ? TweenLite.set(S('.LE')[0], {rotation: 0, transformOrigin: '100% 0%'}); TweenLite.set(S('.LF')[0], {rotation: 90, transformOrigin: '100% 0%'}); TweenLite.set(S('.LG')[0], {rotation: 0, transformOrigin: '100% 0%'}); TweenLite.set(S('.LH')[0], {rotation: 90, transformOrigin: '100% 0%'}); TweenLite.set(S('.LI')[0], {rotation: 0, transformOrigin: '100% 0%'}); TweenLite.set(S('.LJ')[0], {rotation: 90, transformOrigin: '100% 0%'}); HOW SET THIS Then you need to place the balls for the big circle: first you rotate E by -90° so that it's just below F, do the same with G so that it's below H, and with I so it's below J. (Just to be clear: at this stage, A, F, H and J are in the same spot, and B, E, G and I are also in the same spot just below A/F/H/J.) Then you change the transform-origin of F, E, G, H, I and J to (-200% 0%), the center of the big circle, and now you can rotate F and E by -90°, G and H by 180° and I and J by 90°. Now you've placed everything and they all have the same initial reference position from which you can more easily work. When you want to rotate the big circle you make sure that whatever's in the A and B position has its transform-origin set to (-200% 0), and you rotate all 8 balls by either 90° or -90°. When you want to rotate the small circle, then you change the transform-origin of the 2 balls in the center to (100% 0%) and rotate all 4 balls by 90° or -90°.

ACCENT Thank you I understend if i 7 balls but i cant understend how rotate if i 10 balls Can you change in codepen your example

Ok Thank you I write my problem bellow In your example, there are elements that have the same rotation radius in my example, elements (1,2,3,4,5,6,7,8) are rotated around the center of a large circle R, but if rotate left, elements 5,6 then its pivot point changes and revolves around a smaller circles How change rotation position? What i do must hange?

Hello I write script but i cant correct run If click first number 1 and next click number 3 yellow element i cant rotate with 2 blue elements Pleas help me Every elements is svg

Below pictures when click first number 2 and next 3

Hello I want to create a game two color wheel as bellow If click 1 or 2 left wheel rotate If click 3 or 4 righ wheel rotate Please help me, how can I do this using greensock?