Jump to content
GreenSock

Mr Pablo

Juttering "scrolling" animation

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 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 :)

Link to comment
Share on other sites

Perhaps try adding

force3D: true

to your tween.

  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

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.

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