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°.