Rounding 'scale' property

[Climber]

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!

[GreenSock]

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

[Climber]

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

 

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

 

Thanks for the quick response!

[Climber]

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:

https://bugzilla.mozilla.org/show_bug.cgi?id=663776

 

Example (test in Firefox):

http://jsfiddle.net/mennovanslooten/rNBGW/

[GreenSock]

Thanks for letting us know about the tip. Happy tweening!

[colep]

Thanks so much!!! works great.

cp