Animating transform matrix in IE9

[thomas@oxx.no]

Hi there,

Just a quick question. I'm using the Tweenlite library as a fallback for CSS transitions in IE9, and I've run into a problem.

 

This works just fine, on browsers supporting the transform CSS property:

TweenLite.to(testDiv, 2, {"transform": "matrix(1, 0, 0, 1, 200, 200)"});

 

But the transform property is hidden behind the ms prefix in IE9, and this does not work:

TweenLite.to(testDiv, 2, {"-ms-transform": "matrix(1, 0, 0, 1, 200, 200)"});

 

Is this a bug, or is it intentional?

 

Best,

Thomas

[GreenSock]

GSAP was built to handle the prefixing for you. 

 

It's much better to use GSAP's shortcuts for the various transform-related properties. In your case, you're animating x and y because your matrix is an identity matrix except the last two numbers. So this will work MUCH better (and faster):

TweenLite.to(testDiv, 2, {x:200, y:200});

Simpler too, huh? 

 

The other benefit is that when you use GSAP's shortcuts (x, y, rotation, scaleX, scaleY, scale, rotationY, rotationX, skewX, skewY), they can be cached and no additional DOM querying is required on subsequent tweens, maximizing performance. It also ensures that rotational values beyond 360 degrees in either direction are maintained, which you cannot really do when you use a matrix(), even with CSS. 

 

Oh, and notice that using x and y cause it to work in every browser, even IE8!

[thomas@oxx.no]

Well, the problem is that this is a fallback solution, and the matrix is something my system spits out, so I prefere to animate this value. The alternative is a lot of string manipulations and matrix math to extract the scale, rotation, skew and translate values from the matrix.

 

As I said, with the "transform" property this works as intendend, it's just when I try to animate the "-ms-" prefixed property that things fall apart.

 

Anyway, I'll just have to come up with my own solution if this is a known limitation.

 

Thanks for the reply!

 

Best,

Thomas

[GreenSock]

No no, I didn't mean to say it was a limitation of GSAP. Handling transforms is actually one of the biggest strengths of GSAP, especially compared to other libraries. I was just saying that the way you're doing it is costly performance-wise and the very nature of matrices limits your ability to do certain types of rotations (the matrix for 720degrees, 360degrees, and 0degrees are all identical, and scale(-1,-1) is the same as rotate(180deg)).

 

You can use GSAP to animate the "transform" even passing a matrix (as you discovered). I'm a bit confused as to why you're trying to manually add the prefix in there - GSAP will handle that for you under the hood. The other problem is that you're supposed to define properties using camelCase (no dashes). 

 

I just tested your first line in IE9 and it worked fine:

TweenLite.to(testDiv, 2, {transform: "matrix(1, 0, 0, 1, 200, 200)"});

Are you saying that doesn't work for you in IE9? Any chance you could send us a codepen or HTML doc or something that shows it not working properly? Again, you should not be defining "-ms-transform", you should just define the standard "transform" (assuming you can't or don't want to use the more performant shortcuts like x, y, rotation, etc.)