Jump to content


Scale up & rotate x amount of times

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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.


  • Like 2
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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)

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.