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!
Edited by GreenSock
.png.fc7f258b568e575135fbb300dc15f43d.png)
.png.83e30a42c6f8ac739282203dd8f15bb9.png)
Recommended Comments
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 accountSign in
Already have an account? Sign in here.
Sign In Now