Jump to content
Search Community

Rounding 'scale' property

Climber 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

I know Firefox is notorious for having choppy playback. If I'm animating an image down the screen using the "top" property, using roundProps definitely helps make it less jerky. I think Firefox doesn't like things sitting on half-pixel values.


How do I accomplish the same thing using the "scale" property? When I try, I think the scale value is properly rounded, but I'm still getting choppy playback. I'm not sure what's going on under the hood, but it seems like even if the scale value is rounded, the item I'm scaling will potentially still have half-pixel values for its width/height/marginLeft/marginRight/top/left (or however it's technically rendered behind the scenes).


Anyone have any tips here? Thanks!

Link to comment
Share on other sites

Have you tried using "x" and "y" instead of "left" and "top"? Keep in mind that "top" and "left" are completely unrelated to transforms (although they may look similar) and by default, they are always rounded because their values are measured in pixels (CSSPlugin automatically rounds those for you unless you set autoRound:false). However, x and y are transforms, thus they won't be rounded (unless you use roundProps of course).


Aside from that, I doubt there's much you can do about Firefox rendering things that way; it's not related to the tweening engine - it's likely just a browser thing. But if your goal is to somehow force all the edges of the object's bounds to only land precisely on whole pixel values, you could do a bunch of work in an onUpdate, but beware that it could make the object look like it's vibrating if you don't do it exactly right, and the math wouldn't be trivial. Plus all the added calculations could actually slow down the rendering and make it slightly more choppy.


And to be clear about what happens under the hood, TweenLite/Max simply alter the matrix values for the transform during the tween, so it is technically the smoothest possible way to do it (less processing, maximum precision).

Link to comment
Share on other sites

Doing work in onUpdate to force the object's bounds to land one whole pixels seems very difficult and I'm not confident it would work anyway. Or maybe I'm not confident in my ability to do it :D


Alright so I guess I'll have to live with jerkiness in Firefox or simply not do the scaling.


Thanks for the quick response!

Link to comment
Share on other sites

Found a workaround. When you tween the "scale" you should also tween the "rotation" property. Even changing it a very small amount like 0.01 degrees will make the tween perfectly smooth in Firefox.


Found this through a comment on this thread:



Example (test in Firefox):


  • Like 1
Link to comment
Share on other sites

  • 1 month later...

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