Jump to content

GSAP's _gsTransform Object Exposed

| GreenSock

Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. This includes replacing accessing _gsTransform with gsap.getProperty(). Please see the GSAP 3 release notes for details.

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!


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:


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

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!

Edited by GreenSock

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

Join the Club

We love seeing what you build with GSAP. Don't forget to let us know when you launch something cool.

- Team GreenSock

User Feedback

Recommended Comments

Thank you.  I am doing a lot of research.  I think I found a code to implement along with your advise and I just joined codepen.  This is going to be some learning curve.  I am a new coder.  

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