Retriving X value on update

[John Blazek 1 Likes (Newbie)]

Hey all, wanted to see if there is a way to pass a currently tweened value through the onUpdateParams parameter.

 

Example:

TweenMax.to( $('.el'), 1, { x:_X, onUpdate:_FUNCTION, onUpdateParams:[???this.x, this.tweenedValue, I dunno],  ease:Quad.easeOut } ); 

 

function _FUNCTION($x)

{

console.log('looking for the $('.el') X value ) 

}

 

especially with an X value, would rather be able to pull that value with GSAP rather than use the browser selectors.

 

Thanks!

[Chrysto 143 Likes (Specialist)]

http://jsfiddle.net/bassta/B97Za/

or if you need just the values: http://jsfiddle.net/bassta/B97Za/1/

 

Other approach is creating a dummy object, tween it's values and then get them:

http://jsfiddle.net/bassta/B97Za/2/

[Carl 9,066 Likes (Superhero)]

Nice job, Bassta.

 

In addition if you want transform values like x, scale, rotation etc. Their is a top-secret _gsTransform object attached to the DOM element being tweened:

http://forums.greensock.com/topic/7582-get-or-something-equivalent-to-set-for-getting-properties-of-an-element/#entry28751

 

Here is a practical application without any jQuery or other selector engine.

var t = TweenLite.to("box", 1, {x:500, onUpdate:getValue, onUpdateParams:["{self}"], roundProps:"x"});

 

function getValue (tween) {

var element = tween.target;

 element.innerHTML = element._gsTransform.x;

}

 

view it live: http://codepen.io/GreenSock/pen/d737318c77a411e4e9740f45f820e09e

[John Blazek 1 Likes (Newbie)]

Thanks guys!

 

I ended up writing my own codepen for this using jQuery to sort the matrix value: 

See the Pen gkHeI by johnblazek (@johnblazek) on CodePen

 

But I think _gsTransform is the better option here, this is good to know!

 

-JB

[GreenSock 8,117 Likes (Superhero)]

Yeah, just beware that your codepen example only works when the element doesn't have any 3D properties applied to it (like z, rotationY, rotationX, transformPerspective, etc.). In those cases, you get a 16-value matrix3d() back instead of a 6-value matrix(). For example, just add "z:1" to your tween and you'll see what I mean. 

 

There are other benefits to using the _gsTransform too:

1. It's faster (better performance)
2. It allows you to easily get scaleX, scaleY, rotation, and other transform-related values. Try doing that with just the raw matrix string. In fact, it's impossible to do it properly with the matrix() or matrix3d() values when you rotate beyond 360 in any direction.