rotation with className in Chrome

[bunderas]

Hi,

 

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.

[GreenSock]

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. 

[bunderas]

Hi Jack,

 

I tested it too, and it's perfect.

Thank you for the quick response!