Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
John Blazek

Retriving X value on update

Recommended Posts

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!

Link to comment
Share on other sites

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;
}
 
  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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