Jump to content
Search Community

Best way to animate huge circle?

hamstanim test
Moderator Tag

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

Hello again!


What would you think is the best way to animate a huge circle with GSAP?


I've tried :

  • Changing the width/height of a div with border radius (small to big)
  • Changing the scale of a div with border radius (big scaled down to small and then scaled back up)
  • Changing the width/height of a svg circle

For example, http://plnkr.co/edit/vgmRe65FmzmzpcpHR7KM in full screen.

But the animation is not really smooth on Firefox.

I was wondering if my only option is to use a canvas element.


Any ideas?

Thanks :)

Link to comment
Share on other sites

Hello hamstanim, and welcome to the GreenSock Forum!


What you can do is add a slight translateZ (z) property with a slight offset of 0.001


Working forked plnkr  example: http://plnkr.co/edit/aKu0lhs9kuVnBAv7KE48?p=preview


Same example but in codepen:

See the Pen VYXpYE by jonathan (@jonathan) on CodePen


TweenMax.to(circle, 1, {
    scale: 1,
    z:0.001 /* add this slight z-axis shift */


After adding the z:0.001 it is much smoother in Firefox 35. :)


Does this help?

  • Like 1
Link to comment
Share on other sites

Just to be clear, this isn't really a GSAP-related issue; the bottleneck has to do with the browser rendering DOM elements with large areas of change from frame-to-frame. In other words, maybe 0.1% of the work is GSAP calculating and assigning the values whereas 99.9% of the work is the browser rendering all the pixels. 


One very minor thing you could do to aid in performance is to set pointer-events:none on anything that doesn't need to be interactive so that the browser can ignore mouse interactions during the animation. 


If your goal is to get the smoothest result for this type of effect, I'd bet that canvas is going to be your best bet because it doesn't have to factor in any of the off-screen pixels nor does it have to worry about document flow, mouse/pointer interactions, event bubbling, etc. You can still use GSAP to animate your canvas-based stuff, of course. 

  • Like 2
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.
  • Create New...