Jittery animation with slow moving images

[ldev]

Hi there,

I'm trying to create a smooth animation of an image panning across the screen but it seems to be be moving pixel to pixel.

I have force3D set to true but perhaps I'm doing it incorrectly.

Can anyone help?

 

Here is the Code Pen

See the Pen tGLfC by anon (@anon) on CodePen.

[Carl]

Hi and welcome to the GreenSock forums.

 

Thanks for creating the CodePen demo.

 

left and top values will always snap to whole pixel values. Use x instead (same as translateX()).

 

This should look much better: http://codepen.io/GreenSock/pen/ktuGs

[ldev]

ABSOLUTELY PERFECT!!!!! Exactly what I was after and looks ace.

Thank you so much Carl!

[Jonathan]

Hello Idev .. Looks like a Carl beat me to it ..  I was late again

 

To add to Carl's Great Advice of using x ( translateX ) instead of left.

 

Here is my two cents, for what its worth :

See the Pen xjEya by jonathan (@jonathan) on CodePen.

 

Both Firefox Chrome, IE11 cause the image to jitter or shake when moving, translating or scaling images, there are some things you can do to help with this issue:

• Using x instead of left like Carl advised helps tremendously.
• Adding position relative to the absolutely positioned elements parent.. so this way you have an absolutely positioned element, relative to their parent.
• Also if your seeing jitter or shakiness, its good to add a slight translateZ  (z) to the element and a slight rotateZ  (rotationZ) to get it more smooth. Firefox & IE11 have that same type of issue, but the slight rotation on the Z axis and translateZ helps this.

window.onload = function(){

    var bg = document.getElementById("bgimg");
    TweenMax.to(bg, 50, {
       x:"-500px",       
       z: 0.1, // use if jitter or shaking is really bad
       rotationZ: 0.01, // use if jitter or shaking is really bad
       ease:Linear.easeNone, 
       force3D:true
    });

};

[Carl]

Thanks for the great additional advice, Jonathan.

Very helpful to see all details about the various browsers.

 

One thing though. If you use force3D:true, you should not need the slight rotationZ as well.

 

Are you seeing a difference between using

 

rotationZ and force3D vs force3D only?

[Jonathan]

Hey Carl.. yeah, I notice it helps using both force3D:true and rotationZ.

 

i pasted the wrong codepen link above. But I have seen this same type of behavior even using CSS transforms, transitions, animation, and keyframes inside Firefox and IE11. (sometimes chrome)

 

For some reason i notice Firefox / IE11 jitters transformed (scale, translate) images, even with hardware acceleration on, but the rotateZ (rotationZ) stops it.. what a weird browser bug!

 

Please view in Firefox and IE11:

• only force3d:true :

  See the Pen HjtuE by jonathan (@jonathan) on CodePen.

• both force3d:true and rotationZ :

  See the Pen xjEya by jonathan (@jonathan) on CodePen.

I would love to know if anyone else sees the difference?

 

Thanks

[GreenSock]

Yep, I see the difference in Firefox, jonathan. That's just a browser thing, and it kinda makes sense I suppose because when you have the grid of image pixels lined up perfectly with the screen pixels, the browser wants to "snap" them into place, thus it skips sub-pixel rendering whereas if you apply a small rotation, suddenly the image pixels are no longer aligned perfectly with the screen's, so the browser is forced to "fuzz" them a bit and calculate the sub-pixels. 

 

The same thing happens if you apply scaleX:1.001. The whole idea is to knock the image pixel grid off of alignment with the screen's pixel grid. 

[Jonathan]

Nice Jack, good to know.. I thought I was going crazy, these browser bugs can make you see strange things

 

Thanks for the scaleX:1.001 tip !!!

[Jonathan]

I just made a codepen example, with both rotationZ and scaleX comparison for helping the image jitter for Firefox and IE11:

 

See the Pen bvhar by jonathan (@jonathan) on CodePen.

 

Very cool... I really cant see the difference .. can you?

 

[GreenSock]

Nope, I can't see any difference. Looks great!

[CarpeDiem]

i am having trouble with a slow panning image and I've taken all the advice in this thread.  Could it have anything to do with the way the image was saved for the web?  The creatives I am working with also want the image to be "retina sized" (double the actual size).

 

Any advice?

[Jonathan]

Hello CarpeDiem what browser are you seeing this in?

 

Right now Chrome 53 has a bug that could cause your image to shake and jitter. http://greensock.com/forums/topic/13875-chrome-49-janky-gsap/

[GreenSock]

My guess is that if you're doing a slow panning effect, perhaps you're using "left" or "top" properties, or maybe backgroundPosition? Browsers always snap those to whole pixel values (that's not a GSAP thing, it's a browser thing), so it can cause things to look jerky. It's always best to animate transforms like "x" or "y", as those deliver sub-pixel rendering. It's pretty tough to troubleshoot blind, though, so if you could provide a codepen demo that'd be super helpful. 

 

Happy tweening!

[CarpeDiem]

Hi all and thanks for the suggestions.

 

The jitteriness has lessened but now I am finding that as an image pans in Firefox, once it stops it has a slight blur. Anyone ever encounter this?

[Jonathan]

Do you have a codepen example showing this behavior?

 

[kevywalton]

On 3/26/2014 at 4:05 PM, Jonathan said:

Hey Carl.. yeah, I notice it helps using both force3D:true and rotationZ.

 

i pasted the wrong codepen link above. But I have seen this same type of behavior even using CSS transforms, transitions, animation, and keyframes inside Firefox and IE11. (sometimes chrome)

 

For some reason i notice Firefox / IE11 jitters transformed (scale, translate) images, even with hardware acceleration on, but the rotateZ (rotationZ) stops it.. what a weird browser bug!

 

Please view in Firefox and IE11:

• only force3d:true :
• both force3d:true and rotationZ :

I would love to know if anyone else sees the difference?

 

Thanks

If I use Force3D it breaks in Safari but when I add BOTH the rotationZ & z:0.1 it smooths things right out in Firefox... Thanks. This was causing me serious headaches!!! LOl..