Jump to content
Search Community

Jittery animation with slow moving images

ldev test
Moderator Tag

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

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

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 3
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 3
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 4
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

  • 4 years later...
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.. 

 

  • Like 2
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...