Suresh

Thanks a lot for going into such detail, Carl. You're awesome, in case you didn't already know! I think I understand the behavior a lot better now. I didn't imagine I would hit against an optimization trick, but what you said definitely makes sense. 1. BTW, is this the only way to force an update? I'm asking because I'm actually trying to build a timeline based application. So, let's say the code is progress(0).progress(currentTime) Now, if the user tries to modify the box's position at time 0, currentTime will be 0, so we're essentially doing progress(0).progress(0) - which won't force an update. I can very easily work around this special case of course, but I just wanted to check if using progress( ) is the only way to force an update. 2. Does it matter whether I use progress(0) or time(0)? For all practical purposes, I assume they're the same? I tried it with time(0) and it seems to work, so I'm really just asking out of technical curiosity. Oh.. and.. um.. uh.. well, since you keep praising the codepen I posted, I thought I should tell you this. The main reason I posted it that way is coz… I have no idea how to explain that behavior in just a post. It's way too complicated! . So, every time you praise the codepen, I end up feeling a tiny bit guilty about it (but only a tiiiiny bit)

Carl, I've got a follow up question on this. Let's say I'm trying to add 2 tweens to a timeline one after the other - one for x position and one for y position (I'm keeping them as separate tweens coz I'll need to update each one individually). Now, here's what's happening: If I update the timeline after each tween is inserted, then, it behaves like the second update was never called. ie, - create tween for x & add to timeline - set the timeline to the current time again so it can update (the t1.time(duration) bit) - create tween for y & add to timeline - set the timeline to the current time again so it can update When I do this, then as soon as I release the mouse, the object's x position will be updated on screen, but its y position will not. If I scrub the timeline a bit, then it'll update. However, if I update the timeline's time only once at the end, like so, it works: - create tween for x & add to timeline - create tween for y & add to timeline - set the timeline to the current time again so it can update I've added a codepen to show this: http://codepen.io/anon/pen/IrfpH Is there an issue in calling an update too quickly, or is it something else?

Hi Carl, Thanks for the super detailed explanation! I didn't get it the first time, but after taking a nap and coming back to it, it makes sense This line was what I was missing: Keep in mind the timeline had a tween in it but the playhead was paused at the beginning. Thanks again! I'm constantly amazed by how awesome your support is. Glad you liked the codepen.

I'm trying to build a timeline based application and I'm seeing some behavior that I don't quite understand. I've created a codepen along with steps for 3 scenarios to recreate this: http://codepen.io/anon/pen/tlFDc From those 3 scenarios, 1 and 3 work as expected, but scenario 2 doesn't - the rectangle in there just jumps back to its original position. (Sorry if this doesn't make sense on its own, but it'll be clear in the codepen). In scenario 3, if I somehow "reset" the GSAP timeline, then everything starts to work fine again. Why is this happening? Any ideas?

Ah ok, I get it now. Thanks Carl!

Hmm.. I think I'm beginning to understand. I'll try to wrap my head around that invalidate() bit, but thanks for the modified codepen. That solves it! I somehow imagined that the GSAP timeline would be tracking my local JS variable, but now that I think about it... yeah, architecturally that makes no sense at all Is there any difference between doing kill() and remove()? Any reason you choose to use kill() instead of remove() in this case? BTW, you guys are awesome. Such quick and specific help! Keep rocking!

I'm trying to understand how a tween's invalidate() function works. According to the docs, if you invalidate() and restart() a tween, the timeline will take the new parameters of the tween, right? I tried to build a simple example to understand this behavior, but what ends up happening is really confusing. Here's what I have. (I'm using KineticJS) var t1 = new TimelineMax({paused:true, onUpdate:stageUpdate, onUpdateScope:stage}); var tweenX = TweenMax.fromTo(rect, 1, {setX:100}, {setX:500}); var tweenY = TweenMax.fromTo(rect, 1, {setY:100}, {setY:0}); t1.add(tweenX,0); t1.add(tweenY,1); When I add these tweens to the timeline, they work as expected. Now, I have a function where I'm trying to update the way tweenY works. So, I update the parameters, invalidate the tween and the timeline and restart the timeline. function updateTween() { tweenY.invalidate(); tweenY = TweenMax.fromTo(rect, 1, {setY:100}, {setY:200}); t1.seek(0).invalidate(); t1.restart(); } However, the behavior is really confusing. Original behavior: 'rect' moves right to x:500, then moves up to y:0. After updating the tween, what I thought would happen: 'rect' moves right to x:500, then moves down to y:200. What actually happens: 'rect' moves diagonally to x:500, y:200, then moves up to y:0 I built a codepen to show this: http://codepen.io/anon/pen/fLAkd Can someone help me understand this please?

Wait.. there was a plugin all along?! I mean.. uh.. yeah, I knew there was a plugin. I just wanted to do it the hard way. For some man points. Anyway, now that I've earned my man points, I'll use the plugin. Thanks Jack, thanks for clarifying that. I think between all the answers in this post, I now understand the behavior better.

You, my friend, are an absolute genius! Thank you! That did it. I added a getter and renamed the functions and it works now. Thank you!! I've updated the JSBin for anyone else who stumbles across this post. http://jsbin.com/afixoc/5/edit

I'm using GSAP's TimelineMax with Kinetic JS. I got them to work together, but I'm having trouble when I try to pass my own custom functions to the timeline. I've included a jsbin to show the issue. http://jsbin.com/afixoc/4/edit The first part of the animation uses a standard Kinetic JS command and this plays fine. tl.to(rect, 1, {setX:300}); The second part of the animation uses a custom function that I am adding to 'rect' and this is failing. tl.to(rect, 1, {customSetX:100}); I tried to track this by publishing the value to the console and the issue is very strange - the value that's being passed to my function seems to be NaN. Now, the console.log gets printed a number of times, so I can tell that it's being called every frame. However, I can't figure out what's going on with the parameter. When I print (typeof val) it says number, but when I print the actual val, it says NaN. (You can click 'Play Anim' and open the console in JSBin to see this) Can anyone help me understand why this is happening? (BTW, the reason I'm trying to add my own functions is because I need custom rotate and scaling code for my objects to transform around a pivot point rather than Kinetic's offset.)