Simple animation is not smooth

[yli1001]

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

[Carl]

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:

http://codepen.io/GreenSock/pen/yyQMdr

 

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

[yli1001]

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)

[Jonathan]

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, 
    ease:Linear.easeNone
});

:

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!

[mimeartist]

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

[yli1001]

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.