Scale up & rotate x amount of times

[RhinoRudi]

I have this SVG, see codepen link. I would like it to start as a small white dot and it expand into the 3 coloured arcs. So scale up and rotate into final position.

 

First, if i just want it to rotate x amount of times, how would i do that?

 

Then I guess there is the scaling, it could just be minuscule arcs instead of a period. Thinking out loud.

 

There will be additional components to this loader page like text coming in etc.. Just finishing up the pen & paper storyboard. 

 

Any advice is very welcomed.

 

Thanks, Randy

See the Pen eZmzKM by RhinoRudi (@RhinoRudi) on CodePen

[PointC]

Hi RhinoRudi 

 

Welcome to the forums.

 

To rotate a certain number of times, you could set up a separate loop and rotate +=360 each time through, but for simple tweens, the easiest approach is to just multiply 360 * the number of rotations you want.

 

You said you want your SVG to scale up from a small white dot into the rotating arcs. If it were me, I'd add a white circle to the SVG, group all elements together and rotate and scale the group. As the rotation starts, you could then fade out the white circle and fade in the rotating arcs. That's exactly what I did in my fork of your pen which you can see here:

 

See the Pen BKyvop by PointC (@PointC) on CodePen

 

I'm not sure if this is exactly what you meant, but hopefully it helps a little bit.

 

Happy tweening.

[RhinoRudi]

Thanks PointC, thats cool. Now to study the code a little.

 

Is there a way to tell the rotation to spin clockwise or counter clockwise? just add a - negative in the rotation amount. Duh!

 

Just getting in from my after work commute, so it will take me a bit to look closely.

 

Thanks again!

[GreenSock]

Have you tried adding "_cw" for clockwise, "_ccw" for counter-clockwise, or "_short" for whichever is shortest? For example: 

TweenLite.to(element, 2, {rotation:"45_ccw"}); //goes in the counter-clockwise direction

See http://greensock.com/docs/#/HTML5/GSAP/Plugins/DirectionalRotationPlugin/ (most of this functionality is baked into CSSPlugin too)