Juttering "scrolling" animation

[Mr Pablo]

I have a pretty basic animation set up using TimelineMax.

 

It scrolls some text from right to left at a set speed.

 

For some reason, it seems to "jutter" (jitter? lol) and it's quite noticeable on anything less powerful them my desktop PC.

 

Here is a fiddle: http://jsfiddle.net/fcBGJ/1/

 

I need this to be buttery smooth!

 

Thanks

[jamiejefferson]

Perhaps try adding

force3D: true

to your tween.

[Mr Pablo]

I tried with force3D set to true but it didn't help.

[Jonathan]

What browser and browser version is this behavior happening on? .. Firefox, Chrome, IE11 ?

 

Hmmm .. Im not seeing this jittering you speak of.. I tested on:

 

Windows 7 (64-bit) PC

- Firefox 29

- IE11 (11.0.9600.17105)

- Chrome 34.9.1847.131m

 

Also tested on my Android device:

 

Galaxy S3 (4.3 Jelly Bean)

- Google Chrome Mobile

- Firefox Mobile

- Android Stock Browser

 

What other devices have you tried this on that were jittering?

[Mr Pablo]

The main device I am using is an Android Tablet, using the WebView (I've written a custom application for doing various thing, the main part being the display of this animation)

 

The tablet is running Android 4.2.2, has a dual-core A9 @ 1.2ghz, Mali-400 GPU and 1gb RAM.

 

Most animations play smoothly, such as fades etc, but there is something about this side scrolling that makes it look juttery :-/

 

I was inspecting the animation in Chrome and I notice that as the value for the "left" position changed, it was using decimals. Is there a way to force it to tween as an integer?

 

e.g. left would tween from 0 to 10 as 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 and not as 0, 0.1, 0.2 ...1, 1.1, 1.2 ... 10 ??

[Rodrigo]

Hi Paul,

Actually using left/top the browser renders the element in round numbers and not using sub-pixel rendering. That usually is a cause of jagged animations.

A solution would be using x/y instead with force3D in order to use GPU acceleration. Also another neat trick Jonathan came up with is using a tiny rotation value (0.001 for example) in order to get better performance.

Here's the link to the post and a codepen sample Jonathan crafted:

http://forums.greensock.com/topic/9249-jittery-animation-with-slow-moving-images/?view=findpost&p=37344

Rodrigo.

[Mr Pablo]

Ah, i am using X and Y coords, my bad. I'll try left and top, if not, i'll try the tweaks you mentioned.

 

EDIT looks like I should be using X and Y lol. totally misunderstood! I did try left and top though, and the animation on the Android Device was terrible. It would stutter severely and was no where near what it looked like on my PC (which was fairly smooth to be honest!).

 

I have gone back to X and Y and added in the force3D, rotationZ and Z tweaks. Looks about the same as it was before :/

 

I'm going to try slowing the scrolling down a bit.