Jump to content


Half Circle rotation animation

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

Hi. This is my firs post.


I'm trying to learn animation in html5 and javascript.
So far, I worked a little bit with Flash.
But I do not understand a few things, I would ask for example, based on


See the Pen Guwtq by anon (@anon) on CodePen

I want to animate "item2".
So animation rotation, the path (inside) "elementu1".

I hope I wrote it correctly.


Link to comment
Share on other sites

You could try something like this:



Note the


  context.clearRect(0, 0, canvas.width, canvas.height/2);


If you remove it, the anti-aliasing is really jagged as multiple strokes are getting piled on top of each other. 


The bad news is clearing the context gets rid of the light grey top semi-circle.




We can't tween arcs directly, but we can tween any numeric property of any javascript object and then apply those values however we want.


var props = {endAngle:1};

var tween = TweenLite.to(props, 3, {endAngle:2, onUpdate:updateAngle});

The onUpdate callback is pretty much your original arc-drawing function

  • Like 1
Link to comment
Share on other sites

Thank you for your response.

I wanted to make an animation for a preloader images.
I'm not sure whether this method is good.

Here is an example in Flash.

I want to achieve this effect (attached File)




Link to comment
Share on other sites

oh, it appears you just want to rotate the circles, or more specifically the strokes.


Unfortunately, rotating individual canvas elements is non-trivial:



I'd recommend looking into a canvas library like KineticJS or EaselJS and experiment a bit with using those libraries to create the artwork you want to rotate. Once you've created Kinetic or Easel objects its quite easy to animate their rotation with TweenLite.

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.