Jump to content


rotation with className in Chrome

Recommended Posts



I have a problem with transformations in Chrome (webkit browsers).

I would like to store the states of the elements in CSS classes and tween the elements from one state to other by class names.


In the codepen example I rotate the red box three times, with different methods. All of it works perfectly in other browsers, but in Chrome the first tween is scaling instead of rotating. When I inspect the element I can see that in the first tween the browser use the -webkit-transform with a matrix, and the other two tweens use transform, with matrix3d.


What's the solution?


Thanks for the help!



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

Link to comment
Share on other sites

Ah, very interesting. The problem here is actually caused by the fact that Chrome (unlike other browsers) is reporting redundant, duplicated values in the computed style object, one for "transform" and one for "WebkitTransform". I have implemented a workaround in the upcoming release of 1.15.1. You can test with this preview uncompressed version: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js


Seems to work great now. Thanks for bringing this to our attention. 

  • Like 4
Link to comment
Share on other sites

Hi Jack,


I tested it too, and it's perfect.

Thank you for the quick response!

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.