Jump to content
Search Community

Retriving X value on update

John Blazek 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

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



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.



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:



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

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