Jump to content
Search Community

Elements stick when animating

CraigWheatley test
Moderator Tag

Go to solution Solved by Jonathan,

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

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

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

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

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

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

  • Solution

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

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