Jump to content
Search Community

rotation with className in Chrome

bunderas test
Moderator Tag

Go to solution Solved by GreenSock,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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

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.
×
×
  • Create New...