en en en en en en en en en en en en en en en en en en fa en en fr hbs_lat en en en es en en en ms en de en fr en en en ca en en en en en en en en ms en en en en en vi fr en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en ru en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en ms en en en en nl en en en en en fr en pl en es en en en en en en en en en en en fr cv es tr es en en en en ms en en en en en en fr en hbs_lat en en en en en en en fr cv es tr es en en en en de en en en ca en en en en en
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.
The new method I'm trying is as follows (and allows the tween to be used in TimelineMax etc).
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.
I should also point out that I am also placing the tweens in a TimelineMax so that may be the issue.
Posted August 14, 2012
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); }​
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]); }​
I look forward to seeing how your 3D transform helper methods progress. Good stuff.
Share on other sites
Carl    10,905 Likes (Superhero)
Posted August 14, 2012
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]); }​
hopefully some of this helps you accomplish what you need
Share on other sites
chrisgannon    221 Likes (Specialist)
Posted August 14, 2012
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.
Share on other sites
Carl    10,905 Likes (Superhero)
Posted August 15, 2012
You're very welcome Chris. Love all the stuff you have been doing to showcase the strengths of GSAP with Edge.
Share on other sites
Create an account or sign in to comment
You need to be a member in order to leave a comment
Sign up for a new account in our community. It's easy!
Register a new account
Already have an account? Sign in here.
Sign in to follow this   Followers 1
Go to topic listing
Recently Browsing   0 members
No registered users viewing this page.
Animating value not updating when passed onUpdateParams
“No other animation library is as intuitive, rigorous, conceptually simple and well curated as GreenSock’s.”
“This is why I have absolutely no issues with paying for a subscription to GSAP, great product and awesome forum!”
“It's crazy awesome. The whole GSAP platform is, far and away, the best out there for dealing with animation of any sort.”
“Without GSAP I would have ditched front-end dev the day Flash officially died.”
“Truly, you folks on this forum are the nicest, least judgmental, helpful people I've ever encountered.”
“GSAP is just miles and miles ahead of any animation library out there. Great work!”
“I’ve long felt like GSAP is the best kept secret in JavaScript.”
“Really quite impressed with @GreenSock JS - even the small things.”
“@greensock is just pure awesomeness. What more can be said?”
Sign Up For Our Newsletter
Get the latest updates on GreenSock products, exclusive offers, and more right in your inbox.
Your information will always be kept confidential.
Thanks for signing up!
Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.