Jump to content
Search Community

Simple animation is not smooth

yli1001 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

Creating just a simple animation() with some text and an image to run in Chrome. The animation is not 100% smooth. If we watch the animation, it kind of shakes(or pauses) in the middle of animation, anybody has an idea why that may be happening?


Looking around, I found this post which suggests using slight translateZ and rotateZ. However, it does not seem to help when it is applied. here is the version with the trick: 

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

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

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.


Thanks for providing the demo.


Notice how when your animation runs it forces a horizontal scrollbar at the bottom of the window.

Also see how the scrollbar is always changing size.

Since you do not have a width on #demo it has its natural size of 100%, as you move that element the browser keeps thinking that it needs to change the width of the window to display more content. This is triggering a reflow of the page on each update.


Note that if you set a width on #demo it is much better:



Also keep in mind that CodePen shows things in an iframe and the editor also has code running all the time.. which can impact performance.

In debug mode (pro members only) you can see the demo without the editor or iframe overhead, which appears better still: http://s.codepen.io/GreenSock/debug/yyQMdr?


Another thing to fix (although probably not related) is that your css is using an ID selector of demo instead of #demo

  • Like 3
Link to comment
Share on other sites

Hi, Carl, thanks you for the quick response.


It does seem nicer. However, there is still slightly shaking effect during the transition, couple of times for each repetition. I don't know if you can see that. You probably need to watch closely in order to see the shaking issue. Is there anything we can do about that? I tested it in Chrome,FF and IE, the shaking issue only occurs in Chrome and FF, not in IE. In other words, the animation in IE is perfect. (finally something better, :)hehe)

Link to comment
Share on other sites

Good Morning,


To add to the Mighty Carl's great advice. Have you tried adding a slight rotation: 0.001 to your tween. I notice that it often helps in getting rid of some that jank in firefox when translating elements. I tested the below codepen example in Firefox 36.01 on Windows 7, and i didn't see any intermittent shaking.


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


TweenMax.to(box1, duration, {
    x: 800, 
    rotation:0.001, /* add slight rotation offset */ 
    repeat: iteration, 


But like Carl advised testing the codepen in debug mode helps so you can test/debug the code without the iframe in codpen.


I hope this helps! :)

  • Like 1
Link to comment
Share on other sites

My tested was run in windows 8.


Not that this helps... but I can see it stuttering. I'm on a retina iMac if that makes any difference?


My test was run in windows 8, I still see that stuttering issue. However, I have been testing a lot with different setups, it seems the issue is not library related, but rather browsers limitation. 

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