Jump to content
Search Community

TweenMax transform rotate + skew

mini test
Moderator Tag

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



I used tweenmax for Scrollmagic and i have a problem with :

l__values_transform_old = "skew(-50deg) rotateX(22deg) rotateY(218deg) rotateZ(181deg)";
l__values_transform_old = "skew(0deg) rotateX(22deg) rotateY(218deg) rotateZ(181deg)";

l__tweens_hat[key] = TweenMax.fromTo(
							"background-color": value.color_hat,
							"z-index": value.z_index,
							height: value.height_hat_old,
							width: value.width_hat_old,
							top: value.top_hat_old,
							left: value.left_hat_old,
							"-webkit-transform": l__values_transform_old,
							transform: l__values_transform_old,
							"background-color": value.color_hat,
							"z-index": value.z_index,
							height: value.height_hat,
							width: value.width_hat,
							top: value.top_hat,
							left: value.left_hat,
							"-webkit-transform": l__values_transform,
							transform: l__values_transform,

Who return : 


transform: matrix3d(0.862315, 0.34731, -0.657228, 0, 0.0945447, -0.919935, -0.362089, 0, -0.645951, 0.221192, -0.730631, 0, 0, 0, 0, 1);

And if replace in my console by 

transform :  skew(-50deg) rotateX(22deg) rotateY(218deg) rotateZ(181deg) ; 

The result is different.


So, i will block translate to matrix. A parameter existing for this ? Or other method ?


Thanks you for read !

Link to comment
Share on other sites

  • 1 month later...

Sorry about the late response - I dug into this for well over 30 hours and while I made some improvements to the parsing in the next release of GSAP, it's impossible to match things perfectly when you're defining the order-of-operation in a different way. But the current doesn't handle skew properly when you've got 3D values (at least in some cases) and that's largely improved in the next version which you can preview (uncompressed) at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js


It's best to define your rotations in z, then y, then x axis. 


And actually, we strongly recommend that you always set transform-related values directly through GSAP because it's much faster and more accurate for animation. 

  • Like 1
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...