Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
CraigWheatley

Elements stick when animating

Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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? 
 
 

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

I was seeing that same stutter using

See the Pen e56b60497b629a4fd57c9cb1c65a77b3 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 :blink:

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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? 

Link to comment
Share on other sites

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/

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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
Link to comment
Share on other sites

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

 

:)

  • Like 3
Link to comment
Share on other sites

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.

  • Like 3
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.
×