Jump to content
Search Community

Animating custom properties

Roberto Andre 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



I'm having issues trying to animate a custom property of a DOM object using TweenMax. What I'm trying to do is actually very simple, I just need to tween this "currentFrame" property from 0 to 100 so that I can use its value to update theElement with a certain CSS class.


Please see below. I'm obviously using the JavaScript library.



var updateCallback = function(theElement) {
console.log(theElement.currentFrame); // returns undefined

var theElement = $(".box");
// theElement.currentFrame = 0; // uncommenting this line makes the callback function always return 0
TweenMax.fromTo(theElement, 2,{ currentFrame: 0, autoCSS: false}, { currentFrame: 100, autoCSS: false, onUpdate: updateCallback, onUpdateParams: [theElement] });

What could be wrong my approach? The value of "currentFrame" is always numeric, so my hope is that TweenMax can animate it from 0 to 100 in 2 seconds, calling that "updateCallback" each time the value of "currentFrame" changes. So "updateCallback" would fire a total of 100 times and have access to the updated "currentFrame".


Any ideas?


Thanks in advance!





Link to comment
Share on other sites

Hello and Welcome to the GreenSock Forums..


Could you possibly create a jsfiddle or

See the Pen by pen (@pen) on CodePen

example so we can see your code in context to better help you.. thanks.


I cant see your html or css.. but from what i see in your code above.. your trying to reference the element to get the currentFrame..


but in your onUpdateParams you would need to pass {self} .. which passes the tween as a parameter to your function:

var updateCallback = function(tween,theElement) {
        console.log(tween); // outputs tween instance object
        console.log(tween.vars); // currentFrame is inside the vars property
        console.log(tween.vars.currentFrame); // outputs 100

var theElement = $(".box");
// theElement.currentFrame = 0; // un-commenting this line makes the callback function always return 0
TweenMax.fromTo(theElement, 2,
        currentFrame: 0, 
        autoCSS: false
       currentFrame: 100, 
       autoCSS: false, 
       onUpdate: updateCallback, 
       onUpdateParams: ["{self}", theElement] // "{self}" is the tween instance

notice in your updateCallback function i pass tween as the first parameter which references {self}


if you inspect the tween object in the first console.log above in your browser inspector / console .. console.log(tl);


you will see that currentFrame is inside the vars property


tween object --> vars --> currentFrame

  • onUpdateParams : Array - An Array of parameters to pass the onUpdate function. For example, TweenMax.to(mc, 1, {x:100, onUpdate:myFunction, onUpdateParams:[mc, "param2"]}); To self-reference the tween instance itself in one of the parameters, use "{self}", like: onUpdateParams:["{self}", "param2"]



i hope this helps unless im missing something since i don't see all your code in context :)

  • Like 1
Link to comment
Share on other sites

Hi Jonathan,


It does help, thanks for your reply! All clear about the "{self"} parameter, I just assumed the object being animated would be passed directly as a parameter to the callback function.


One remaining question, though: the callback function fires a total of 120 times (I suppose this is a bit of an arbitrary number, depending on how long the tween lasts). Is there a way for the updateCallback function only be fired when the value being animated changes?

So it would fire 100 times as I'm animating a value from 0 to 100. And the current value being animated would be passed to the updateCallback, so that I can use it on each iteration. In your example, the value of currentFrame is always 100.


Is this the way TweenMax works or am I wrong?


Thanks again!



Link to comment
Share on other sites

the engine runs at 60fps and your duration is 2 seconds


60 * 2 = 120


onUpdate's are tied to the heartbeat of the engine (ticker) which most of the time is based on the browsers requestAnimationFrame event for smoothest performance possible. 

  • Like 1
Link to comment
Share on other sites

Thanks everyone for your suggestions! I managed to solve my problem adapting the solution below to my needs. My original snippet didn't really have a context, it was just a tween I created to illustrate what I was trying to accomplish.


Essentially I was convinced that the onUpdate callback would fire automatically each time the value being animated changes (rounding to the nearest integer), ignoring it was instead connected to the general TweenMax playhead/heartbeat.


I'm fairly new to GSAP so your comments were very helpful, thanks again.




Here's a way to call a function only when the value changes whole numbers:

See the Pen xszny by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

Actually, Roberto, an onUpdate of a tween or timeline only gets called when that particular tween's (or timeline's) values get updated (change) - it does NOT get called every time the core engine updates. For example, if you have a 1-second tween with an onUpdate, and the tween's delay is 0.5 seconds, then for the first 0.5 seconds the onUpdate won't get called (since the tween is delayed), then it will fire every time the tween updates until it finishes, and then after it finishes the onUpdate will not get called anymore even though the core engine continues to run (maybe other tweens are happening too). 

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