CSS3 rotation and matrix3d values precision vs. the straight rotateY

[jamix]

We need to do very slow Y-rotation of a wide object in our project, and we noticed that this produces visible jerking with GSAP. We have been able to trace it to a precision issue in the values of the matrix3d transform that GSAP generates.

 

Basically, during the tween, the 4th value of matrix3d increases from 0 to 0.00001, 0.00002 and so on. The thing is, even though there's tweening going on, the object doesn't get redrawn until this value changes (from 0 to 0.00001 and then to 0.00002 etc.), which produces the jerkiness.

 

See the Codepen where both the red and blue rectangles are rotated 10 degress over 60 seconds and observe the jerkiness in the red one (more visible in Firefox due to lesser anti-aliasing). The only difference is that the rotation is applied through TweenLite to the red rectangle and directly via CSS to the blue one.

 

We have switched to tweening of the CSS in our project but it would be nice to see this issue address in GSAP's CSS tweening, too.

See the Pen qEqRZj by anon (@anon) on CodePen

[jamix]

Anyone?

[GreenSock]

I'll look into this further, but I'm pretty sure it has to do with a limitation in how browsers cast a number as a string. Super small numbers get converted to scientific notation, like 0.0000000001 turns into 1e-10 and unfortunately, browsers refuse to read numbers like that in a matrix() or matrix3d() string (or pretty much any css value). That's why GSAP does the slight rounding of super small values. I'll poke around and see if I can identify any workarounds that are performant (I do NOT want to use something like toFixed() because it really hurts performance). 

[GreenSock]

After lots of wrangling with 3d matrix stuff, I believe I have a solution that'll be in the next release. You can see it working here in this fork of your codepen: 

http://codepen.io/GreenSock/pen/80494a5057a168bd9a1a2bf59aa7d15d/

 

Better?

[jamix]

Excellent, the added precision to the matrix3d values does that. Thank you!