Jump to content
GreenSock

ldev

Jittery animation with slow moving images

Recommended Posts

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

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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

Thank you so much Carl!

Link to comment
Share on other sites

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
    });

};

:)

  • Like 1
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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:

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

 

Thanks :)

  • Like 2
Link to comment
Share on other sites

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. 

  • Like 3
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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?

 

:)

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 2 years later...

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?

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

Do you have a codepen example showing this behavior?

 

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