Jump to content


translate3d vs matrixes

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



First of all, thank you for this amazing product! There are no words to explain my happiness when I first came across GSAP..


I have a question regarding the famous translate3d.. I see that only with setting the z property to something else than 0 gets TweenMax to use translate3d where in other cases it uses the matrix property for animating when the "x/y" is passed. I am just curious if I can avoid this behaviour and make the translate3d default without having to set z to some value?


And can you please explain (or point me to some good read about it), how can I make TweenMax animate some custom properties (this can relate to the previous question,  ex if I set _x: 30 it knows to use translate3d(30px, 0, 0) instead of matrix. Or if I did a previous check with, say Modernizr for transform/translate support and passed the _x, it gets recognised as translate3d/translate/left depending on the result)?

Not that this is of some crucial importance for me nor do I have anything against matrixes, I'm just curious about how things work here and I can be a "neat freak" sometimes :)


Thank you!

Link to comment
Share on other sites

Welcome to the forums. I'm glad to hear you've been enjoying GSAP so much. 


As for the translate3d() stuff, all you need to do is set force3D:true and it'll make sure that the 3d trick gets applied (you don't need to set a non-zero z value). For example:

TweenLite.set(yourElement, {force3D:true}); //from now on, that element will use 3d transforms

Or directly in a tween:

TweenLite.to(yourElement, 2, {x:100, force3D:true});

It'll use a matrix3d() if any kind of rotation or skewing is involved, because that performs best in most browsers. If you're only doing translation and/or scaling, it'll skip the matrix3d(). 


I'm a little confused about your "custom properties" question because it almost sounded like you're wanting the engine to handle things in a very unique way based on some custom data you feed in. It doesn't do that. But you can tween ANY numeric property of ANY object. For example:

yourElement.customProp = 0;
TweenLite.to(yourElement, 2, {customProp:100, onUpdate:function() {

Does that answer your question?


If you want to animate different properties based on a modernizr check, you'd need to implement that in your code. FYI, GSAP automatically handles transforms in that manner, so if you try animating x, y, scale, or rotation in IE8, it'll use a special IE-only filter to emulate that. It'll work with 2D transforms but of course IE8 is incapable of doing any kind of 3D transforms, so those would be ignored. 


Does that help?

  • Like 1
Link to comment
Share on other sites

Hello Jack,


thank you for the reply. force3D is exactly what i was looking for.


Regarding custom properties, It's perfectly clear now. If I had any further questions I'll get back to you here. Thanks again.



Link to comment
Share on other sites

  • 1 month later...

Hi Jack,


Any ideas how to handle a translate3D  of 100% (eg. translate3D(0,100%,0) ? Any value I set, output is in pixels.


Thanks in advance

Link to comment
Share on other sites

Due to the way matrices work and performance considerations, percentages aren't supported in transforms, but you can certainly use percentages with "top" or "left" properties. Or you can just do the math yourself and plug in the appropriate pixel-based y transform value. 

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