get webkit-transform:matrix values from tween

[macguffin 28 Likes (Newbie)]

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

[Jonathan 5,176 Likes (Superhero)]

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?

[macguffin 28 Likes (Newbie)]

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)
}

[Jonathan 5,176 Likes (Superhero)]

Cool, glad you got it working