Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

GSAP's _gsTransform Object Exposed
Sign in to follow this  


| GreenSock
3012

Have you ever wondered how to get the position, rotation or other transform-related properties that were animated with GSAP? It's actually quite simple: they're all neatly organized and updated in the _gsTransform object which GSAP attaches directly to the target element!

Watch the video

Let's set the rotation of the logo to 20 degrees.

var logo = document.querySelector("#logo");
TweenMax.set(logo, {rotation:20});

GSAP applies that rotation via an inline style using a transform matrix (2d or 3d). If you were to inspect the element after the rotation was set you would see:

<img style="transform: matrix(0.93969, 0.34202, -0.34202, 0.93969, 0, 0);" id="logo" src="..." >

Not many humans would be able to discern the rotation from those values. Don't worry - the _gsTransform object has all the discrete values in human-readable form!

console.log(logo._gsTransform);

The console will show you an Object with the following properties and values:

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

To grab the rotation of the logo you would simply use:

logo._gsTransform.rotation

Click "Edit on CodePen" and open the console to see how it works

See the Pen _gsTransform demo by GreenSock (@GreenSock) on CodePen.

Get transform values during an animation

Use an onUpdate callback to read the values during an animation:

var logo = document.querySelector("#logo");
var output = document.querySelector("#output");
TweenMax.to(logo, 4, {rotationY:360, x:600, transformPerspective:800, transformOrigin:"50% 50%", onUpdate:showValues, ease:Linear.easeNone});

function showValues() {
  output.innerHTML = "x: " + parseInt(logo._gsTransform.x) + "
 rotation: " +  parseInt(logo._gsTransform.rotationY);
  //you can also target the element being tweened using this.target
  //console.log(this.target.x);
}

The demo below illustrates how to read transform values during an animation.

See the Pen _gsTransform demo: animation by GreenSock (@GreenSock) on CodePen.

Read pre-existing CSS transform values

It’s important to note that the _gsTransform object will only exist AFTER you set or animate a transform property with GSAP. Imagine you have an object with the following CSS applied

#logo {
  transform: translateX(200px) scale(0.8) rotate(180deg);
}

If you want to use GSAP to read those individual transform values you could use a set() to apply a value that doesn’t change anything. In the code below we are increasing the existing x value by 0.

var logo = document.querySelector("#logo");
var output = document.querySelector("#output");

TweenMax.set(logo, {x:"+=0"});

To read the transform values you can use:

var transforms = logo._gsTransform;
output.innerHTML = "x: " + transforms.x + "
 scaleX: " + transforms.scaleX + "
 scaleY: " + transforms.scaleY + "
 rotation: " + transforms.rotation;

The demo below illustrates how to parse transform values that were set via CSS. There is no animation to see.

See the Pen _gsTransform demo: css transform values by GreenSock (@GreenSock) on CodePen.

We strongly recommend always setting transform data through GSAP for optimized for performance (GSAP can cache values). Unfortunately, the browser doesn't always make it clear how certain values should be applied. Browsers report computed values as matrices which contain ambiguous rotational/scale data; the matrix for 90 and 450 degrees is the same and a rotation of 180 degrees has the same matrix as a scaleX of -1 (there are many examples). However, when you set the values directly through GSAP, it's crystal clear. Happy tweening!

Get an all-access pass to premium plugins, offers, and more!

Join the Club

When is the last time you worked on something you love? Go animate something cool and then share it with us.

- Team GreenSock
Sign in to follow this  


User Feedback

Recommended Comments

There are no comments to display.



Guest
This is now closed for further comments

×