TweenMax transform rotate + skew

[mini]

Hi,

 

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(
					$("#org-box-hat"),
					0.5,
					{
						css:
						{
							"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,
						},force3D:false,
					},
					{
						css:
						{
							"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,
						},force3D:false,
					}
				);

Who return : 

t

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 !

[GreenSock]

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.