Jump to content
Search Community

Animating value not updating when passed onUpdateParams

chrisgannon 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 Jack,

 

I'm trying to improve on the current method of applying animating values to Webkit's 3D transforms ( this is my current jQuery implementation http://chrisgannon.w...-and-greensock/ ).

 

The new method I'm trying is as follows (and allows the tween to be used in TimelineMax etc).

 

 

var myObject = {value:100};

TweenMax.to(myObject, 3, {value:400, onUpdate:applyValue, onUpdateParams:[myObject.value]});

function applyValue (val){

 console.log(val); //always passes 100
};

 

I may be missing something here but I would expect the 'val' parameter to be updated onUpdate but it seems to only pass the initial value that was set. i.e. 100.

 

The following obviously works but it's no longer a generic function available to any element.

 

 

var myObject = {value:100};

TweenMax.to(myObject, 3, {value:400, onUpdate:applyValue, onUpdateParams:[myObject.value]});

function applyValue (val){

 console.log(myObject.value); //animates from 100 to 400
};

 

Is there a way to access/pass the animating value?

 

I should also point out that I am also placing the tweens in a TimelineMax so that may be the issue.

 

Cheers,

 

Chris

Link to comment
Share on other sites

Hi Chris,

 

I think I have some info that will help.

 

First keep in mind that the following line of code:

 

TweenMax.to(myObject, 3, {value:400, onUpdate:applyValue, onUpdateParams:[myObject.value]});

 

only executes once. As such the onUpdateParams gets evaluated only once, and the value passed into the onUpdate function will always be the same as it was when the tween was first created. In your case myObject.value = 100 is going to be re-used over and over.

 

Fortunately for all of us Jack created a way in v12 to self-reference a tween which means that a tween can pass a reference to itself into any of the tween's callbacks. Please read Feature #10 on the v12 page: http://www.greensock.com/v12/

 

Here is an example:

 

var myObject = {value:100};
TweenLite.to(myObject, 4, {value:400, onUpdate:applyValue, onUpdateParams:["{self}"]});


function applyValue(tween) {

output.html(tween.target.value);

}​

 

 

live demo: http://jsfiddle.net/...bassador/DddTK/

 

To make the onUpdate function even more generic you could additionally pass in the name of the property of the target of the tween that you want updated

 

 

var output = $('#output');
var myObject = {value1:100, value2:0};
TweenLite.to(myObject, 4, {value1:400, value2:50, onUpdate:applyValue, onUpdateParams:["{self}", 'value2']});

//only value2 will be used
function applyValue(tween, prop) {

output.html(tween.target[prop]);

}​

 

live demo: http://jsfiddle.net/...bassador/RDkXa/

 

I look forward to seeing how your 3D transform helper methods progress. Good stuff.

Link to comment
Share on other sites

oh, and also without self-referencing the tween you could pass in just the object and the NAME of the property you want like so:

 

 

var myObject = {value1:100, value2:0};
TweenLite.to(myObject, 4, {value1:400, value2:50, onUpdate:applyValue, onUpdateParams:[myObject, 'value2']});

//only value2 will be used
function applyValue(obj, prop) {

   output.html(obj[prop]);

}​

 

http://jsfiddle.net/geekambassador/PYuGS/

 

hopefully some of this helps you accomplish what you need

Link to comment
Share on other sites

Cheers Carl!

 

I'm familiar with passing the tween's self reference but I didn't know the animated value would be part of that tween object. Seems obvious really and very handy - as usual Jack is pre-emptively implementing useful stuff.

 

The second and third examples you gave are also useful - not particularly in the context of my current experiment but useful syntax to know (old AS2 stylee!) - thanks again.

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