Jump to content
Search Community

get scale?

erikb test
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

Is there a way to use greensock to query a css transform attribute (e.g. scale) that has been tweened ?
 
For example, on chrome, transforming scale modifies -webkit-transform.  I want to pull out the value of 'scale' from that tweened matrix.

 

Link to comment
Share on other sites

Sure, GSAP attaches a super secret ._gsTransform property to the DOM element that is being tweened. You can query the scaleX, scaleY, rotation, skewX, x, y or any other transformed property.

 

Take a look here:

 

var red = document.getElementById("redBox"),
    debug = document.getElementById("debug");


TweenMax.to(red, 5, {x:500, scale:0.2, rotation:360, repeat:10, yoyo:true, onUpdate:getTransforms})


function getTransforms() {
  debug.innerHTML = "scaleX: " + red._gsTransform.scaleX + " <br> rotation: " + red._gsTransform.rotation + " <br> x: " + red._gsTransform.x;
}

http://codepen.io/GreenSock/pen/uHehd/

  • Like 1
Link to comment
Share on other sites

  • 1 month later...

There isn't any GSAP-specific way (currently). You have to go into the element's style and pull it out like:

element.style.webkitTransformOrigin

Here is a modified demo showing how to do it: 

 

http://codepen.io/GreenSock/pen/zIvnl (Chrome or Safari)

 

the catch of course is that you need to know which vendor prefix to use in order to hit the right property. 

  • Like 1
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.
×
×
  • Create New...