Jump to content


What is _gsTransform ?

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 am new to GreenSock and trying to use _gsTransform . But I do not understand its operation and how the used ...

Someone can explain to me ? I searched everywhere but I found nothing about it.
Please help me !

Link to comment
Share on other sites

When you tween any elements, GSAP attaches _gsTransform to that element's DOM object. So you can access all the current values by using _gsTransform. For example,


var elem = document.getElementById('box');

TweenMax.to(elem, 1, {xPercent: 100});



Will return current xPercent for that element. It can be very useful to access values of elements so you can calculate anything you want.


If you are using jQuery,


var $elem = document.getElementById('box');

TweenMax.to($elem, 1, {xPercent: 100});



You will have to use index of that element to access DOM object.


If you are using Draggable,


onDrag: function(){


So basically you have to access DOM object to further access these values. You can investigate further by checking objects from developer tools and get idea about what values GSAP attaches to DOM object of each element it ever tweens/sets.

  • Like 7
Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.


Whenever you do a transformation (x, y, scale, rotation, etc) on DOM element GSAP attaches a JavaScript object to that DOM element that stores all the individual transform values. This object was originally intended for internal use by the engine to store these values which is why the property has an underscore at the beginning: _gsTransform. The underscore is typically a way for an author to denote a private property.


Its also worth noting that when you do transforms on an object GSAP uses a 2D or 3D matrix via CSS. So after you scale, translate and rotate an object its CSS transform may look like:


transform: matrix(0.46984, 0.17101, -0.34202, 0.93969, 200, 0);


We had plenty of people asking: "How do I know what the rotation value is from reading that matrix?" So we decided to let them see the private _gsTransform object which stores the human-readable values for rotation, x, y, etc.


I see that Sahil just left a great answer so I think I'm done. 


here is a demo that I found. 


See the Pen ?editors=0011 by GreenSock (@GreenSock) on CodePen


if you open the js console you will see the _gsTransform object after the tween is finished looks like:


Object {
  force3D: "auto",
  perspective: 0,
  rotation: 20,
  rotationX: 0,
  rotationY: 0,
  scaleX: 0.5,
  scaleY: 1,
  scaleZ: 1,
  skewType: "compensated",
  skewX: 0,
  skewY: 0,
  svg: false,
  x: 200,
  xOffset: 0,
  xPercent: 0,
  y: 0,
  yOffset: 0,
  yPercent: 0,
  z: 0,
  zOrigin: 0


  • Like 5
Link to comment
Share on other sites

Thank you for all answers.
I'm not sure I understood everything. Would there be a possible comparison with basic languages such as js ?

Link to comment
Share on other sites

Can you tell us, what you are trying to do? So we can give you example with your own demo, it will be a lot easier for you to understand.

  • Like 4
Link to comment
Share on other sites

I try to create an elastic inertia with the mouse but my effect does not work ...



Link to comment
Share on other sites

Hi @rmdms :)


Could you put together a demo of what you're trying to do? It will be much easier to get you the best answers. Here's some info about doing that:




Link to comment
Share on other sites

1 hour ago, rmdms said:

I try to create an elastic inertia with the mouse but my effect does not work ...




What are you trying to do? You need to be specific. That script took me 2 seconds to fix, but there's nothing in there that would have anything to do with _gsTransform as it uses canvas. All the properties you need are listed right there.



If you're trying to do that with HTML or SVG, that's another story.


Here's a version I had lying around.


See the Pen d47c3c0312416639fda6fe1cea0c5cfb by osublake (@osublake) on CodePen



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