Jump to content
GreenSock

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

get webkit-transform:matrix values from tween

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

Hi I was wondering if I could get x and y values of a transform matrix from the tween.

 

Basically I have a small canvas stage that I'm moving rather than a small sprite on a large stage to maximise performance.

var S_die = document.getElementById("IWGdie0");
  
TweenMax.to(S_die, 4, {x: 10, y: 10, onUpdate: collisionDetect, onUpdateParams: ["{self}"], ease: Strong.easeOut}); 
      

In the collisionDetect function I was hoping to pull the x and y values directly from the tween ("{self}").

function collisionDetect(t) {
        var s_x = t.vars.css.x,
            s_y = t.vars.css.y,          
        console.log('matrix=', t)
}

I thought I found it with tween.vars.css.x but this seems to be set at the end value throughout the whole tween.

 

(Edit: Obviously vars is what I'm defining in the tween, duh, which is why it's the same.) 

 

Is this possible as I think it would be easier in the long run than extracting the stuff from the matrix directly as I'm guessing your functions do a lot of work with compatibility.

 

As always thanks for your help.

 

Matt

Link to comment
Share on other sites

Hello macguffin

 

You can try to access the gsTransform object to get values:

var x = element._gsTransform.x; // get x value
var y = element._gsTransform.y; // get y value

Like this:

function collisionDetect(t) {
    var s_x = t._gsTransform.x, // t.vars.css.x,
        s_y = t._gsTransform.y; // t.vars.css.y,
    console.log('matrix=', t)
}

Does that help? :)

  • Like 1
Link to comment
Share on other sites

Thanks very much Jonathan that was just what I needed:

 

The code that worked with an {self} as a param was this:

function collisionDetect( t) {  
 console.log('matrix x pos =', t.target._gsTransform.x)
}
Link to comment
Share on other sites

Cool, glad you got it working :)

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.
×