Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Images shake during minor scale and movement

Recommended Posts

Can anyone give me any tips to reduce jittery animation when scaling or tweening short distances with Tweenlite? I've tried force3d:true, and z:00000.1 to try to force hardware acceleration, but didnt seem to work.


Link to comment
Share on other sites

Do you have a reduced test case we can see? And what browser are you looking at? It'd be super useful to see a codepen demo so that we can see what you're seeing and poke around a bit. Something sounds a bit fishy but it's tough to say without seeing it. 

Link to comment
Share on other sites

Oh, that's because you're animating top/left which browsers only allow on whole pixel values. The pixel snapping is what's causing the jerky animation. That's not a GSAP issue. It would be much smoother if you animated x/y instead of top/left because x/y are transforms which use sub-pixel rendering. 

  • Like 3
Link to comment
Share on other sites

Looks like that did the trick! Thanks very much!

Link to comment
Share on other sites

  • 3 weeks later...

I have a similar issue of jittery images Firefox only (Chrome and IE seem to be fine), when scaling images: http://holiday.cmog.org


I've added hardware acceleration to the body with translate3d. I saw the comment about adding 0.01 deg rotation --I can't add that in a tween, as it overwrites other transforms I'm using to center the images (translate X and Y), but I've added it the style of the images. But those don't seem to be doing the trick.


Any suggestions?

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.