What is _gsTransform ?

[rmdms]

Hi,

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 !

[Sahil]

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});

console.log(elem._gsTransform.xPercent);

 

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});

console.log($elem[0]._gsTransform.xPercent);

 

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

 

If you are using Draggable,

 

Draggable.create(elem,{
onDrag: function(){
	console.log(this.target._gsTransform.xPercent);
}
});

 

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.

[Carl]

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
}

 

[rmdms]

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

[Sahil]

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.

[rmdms]

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

 

script.js

[PointC]

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:

 

Thanks. 

[OSUblake]

1 hour ago, rmdms said:

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

 

script.js

 

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.

 

See the Pen 53e5deafe28ae086a5ff3efa61a5fae7?editors=0010 by osublake (@osublake) on CodePen

 

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