Roberto Andre

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

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

Hello, 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! Andre