Jump to content

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

CSS3 rotation and matrix3d values precision vs. the straight rotateY

Recommended Posts

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

Link to comment
Share on other sites

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

  • Like 3
Link to comment
Share on other sites

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

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.