Elements stick when animating

[CraigWheatley 49 Likes (Newbie)]

I have a very simple setup with two elements tweening right and left. 

One is using 'x' and 'force3D:true' while the other is simply using 'left'.

 

Both seem to 'stick' as they move across the page, looking almost laggy.

 

I'm running  Chrome 49.0.2623.110 (64-bit) on OSX 10.10 and TweenMax 1.18.0.

 

I even recorded the browser with quicktime and you can see it in the video, too.

 

Is anyone else getting the same result?

See the Pen BKWxex by craigster1991 (@craigster1991) on CodePen

[Shaun Gorneau 2,037 Likes (Superhero)]

I'm sorry I can't add much but only to say I see it in Chrome 50.0.2661.57 beta (64-bit) and Firefox 45.0.1 also. Safari is perfectly smooth

[Carl 11,167 Likes (Superhero)]

hmm, I can't really say that I see anything strange.

 

The CodePen editor can sometimes be running processes that interfere with performance and iframes are known to be not so good.

 

Do you get the same results in debug mode? 

 

http://s.codepen.io/GreenSock/debug/KzyYYM

 

Can you post your video so that we can see what you are seeing?

[Rodrigo 5,412 Likes (Superhero)]

Hi,

 

Like Shaun I'm not seeing anything. Tested IE11, Chrome 49 and Firefox 44 on Windows 7 64b.

 

My guess is that perhaps you have too many extensions running, which could mean memory usage. Also this happens on the first run of the animation or in every repeat?

 

Finally long animations, like this one, can become a bit jumpy some times.

[PointC 14,427 Likes (Superhero)]

I'll echo what Shaun, Carl and Rodrigo said.

 

I tried almost everything - 32/64bit, Win7/10, Edge, FF and Chrome. 

 

All looked fine to me.

[ohem 334 Likes (Leader)]

I did notice a bit of a jolt/jerk in Firefox 45, Chrome 49, and Safari 9 on my Mac.  Adding rotation:0.01 seems to help in Chrome and Firefox but not Safari: http://s.codepen.io/ohem/debug/dMZxgK

[Shaun Gorneau 2,037 Likes (Superhero)]

I want to clarify ... in my first post, I was apologizing for not adding much to the conversation ... other than to state that I do indeed experience the snagging in Chrome 50.0.2661.57 beta (64-bit) and Firefox 45.0.1.

[OSUblake 18,495 Likes (Superhero)]

I see the problem too. Pretty bad in Chrome.

 

Here's the pen I used.

See the Pen ?editors=0010 by osublake (@osublake) on CodePen

[PointC 14,427 Likes (Superhero)]

That is really strange. From the video, I see what everyone is talking about, but I don't see any of that on the OP's pen or Blake's.

 

I just tested in Chrome 49 Win10 and it's perfectly smooth for me. I refreshed a dozen times and didn't see a single twitch.

[Jonathan 5,392 Likes (Superhero)]

I was seeing that same stutter using

See the Pen ?editors=0010 by osublake (@osublake) on CodePen

from above, and it was translating all shaky-like on Windows 10 in Firefox 45.0.1 and in Chrome 49.0.2623.110 m.

 

But after adding rotation: 0.01 the stuttering went away ... just my two measly bits. Weird

[CraigWheatley 49 Likes (Newbie)]

Yes I see the same same stuttering on Blake's Codepen and a recording of mine shows the same result:

 

https://www.youtube.com/watch?v=sHPQMmpWDD0&feature=youtu.be

 

This also occurs is Codepen debug, and locally on my apache server with the exact same code on the same browser.

Adding rotation has no effect for me.

 

My machine is a 2012 Mac Mini with a quad core cpu, intel hd 4000 gpu and 10gb of ram. I don't see a reason why it should be happening...

[OSUblake 18,495 Likes (Superhero)]

My best guess is that it is related to this issue.

http://greensock.com/forums/topic/13875-chrome-49-janky-gsap/

 

Jonathan said that adding rotation: 0.01 fixed it, so it might be an anti-aliasing bug. Sub-pixel rendering kicks in if a value has a decimal value, which is what happens when you add a slight rotation to an element that was at an integer value.

x = 5; // no sub-pixel rendering
x = 4.999 // use sub-pixel rendering

It uses a completely different algorithm for anti-aliasing, which can cause stuff to become blurry or snap if it's not actually doing the sub-pixel rendering or vise versa.

[CraigWheatley 49 Likes (Newbie)]

Jonathan said that adding rotation: 0.01 fixed it...

 

This doesn't fix it for me - I tried on both my codepen and the one Blake posted.

 

Weirdly if I run two different tweens with different times (one of the boxes one second longer) they both stick at the same time, not at a given x position. 

If it is the sub-pixel rendering issue, would that be occurring on every tween at the same time? Like an engine issue? 

[OSUblake 18,495 Likes (Superhero)]

Rotation didn't change anything for me either, nor did using CSS animations.

See the Pen f2e826e130e49b756eaf37b5374865f7?editors=0100 by osublake (@osublake) on CodePen

 

This won't help you fix the problem, but here's a good intro explaining how sub-pixel rendering works.

http://www.html5rocks.com/en/tutorials/internals/antialiasing-101/

[CraigWheatley 49 Likes (Newbie)]

I'm getting the exact same issue with the CSS animations you've posted - on seemingly every device and browser I test...
 
I've made a rotation based animation in TweenMax and run it on my phone (Xperia Z3 Compact) and it also glitches:

 

https://youtu.be/VHq0EROBaWc

[Jonathan 5,392 Likes (Superhero)]

Try testing this outside of codepen to see if you still see this behavior? And inspect the element and make sure it is actually being animated with translate3d() or matrix3d(). If not see if z: 0.01 helps?

 

Best thing to do if only Blake, ohem, and ChrisWheatley are seeing this, is to share what you both have in common.

 

What OS ?

What OS version ?

What graphics card ?

What browser ?

What browser version ?

 

Since me and Craig (PointC) don't see this behavior.

 

Try adding autoRound: false .. see if that helps?

 

Otherwise I'm no help since I can't replicate this on Windows 7, Windows 10, or on iOS .. in Chrome 49 (mobile and desktop) or even in latest Firefox, IE11 and MS Edge.

[CraigWheatley 49 Likes (Newbie)]

I've replicated outside of codepen. I've run it locally on my machine's apache server using TweenMax and css animations. I've then run this local version on my machine in several browsers and my phone too (see my previous post).

 

The elements are being translated in 3D, but the issue remains regardless if they are or not. I've tried force3D:true and z:0.1.

 

autoRound doesn't help either.

 

My current machine is:

Late 2012 Mac Mini

OS: 10.10.5

GPU: intel hd 4000

Browser: Chrome 49.0.2623.112 (64-bit)

I get the same issue on my laptop:

Windows 10 Pro

GPU: Nvidia GTX 765M

Browser: Chrome 49.0.2623.112 m

 

And my phone:

Xperia Z3 Compact Android 5.1.1

GPU: Adreno 330

Browser: 49.0.1626.105

[Jonathan 5,392 Likes (Superhero)]

If your seeing this pretty much in Chrome 49 then there already is a bug report already reported for this behavior.

 

You can go here to view the bug report

 

http://greensock.com/forums/topic/13875-chrome-49-janky-gsap/page-2#entry59138

 

And the GSAP forum topic it was related to

 

http://greensock.com/forums/topic/13875-chrome-49-janky-gsap/page-2#entry59138

 

If you feel it is different bug, since your not scaling and only translating, then feel free to submit a bug report to the Chrome Dev Team.

 

https://bugs.chromium.org/p/chromium/issues/list?cursor=chromium%3A596382&q=chrome%2049

 

[CraigWheatley 49 Likes (Newbie)]

It feels like much the same issue. Mostly occuring on chrome intel/nvidia cards. 

I'll be keeping an eye on the chrome bug and if this issue remains once it's solved I'll report a new bug.