Updating tween value while animating

[DragoshDX]

Hello all. 

 

I am trying to animate the top value of a number of elements. Their tweens (four of them) are in a timeline but they are overlapped so the second one starts shortly after the first, and so on. 

 

 

Here is an example of how things run: 

when the first animation hits top: 50 the second one is at around 39px. There is also a brief 500 ms pause at this point. 

At this point I would like to update the second animation position to 50px, then it should continue from 50 to say 70 which was it's original target. I tried using TweenLite.set() thinking there may be an internal pointer to the value so changing it directly in the DOM won't help. 

However, when the pause stops, the second animation continues from 39 instead of 50. 

 

The reason I am doing this is not for visual purposes, I need a manually configurable percentage loader for the animation. I am actually animating other stuff, but the first animation is not the 50% mark, however I need to show that it is. So the hack at the top is what I figured might work, but I can't seem to get the tween current target to continue from where I need. 

 

Thank you.

Dragos.

[Carl]

Hi and welcome to the GreenSock forums,

 

Really difficult to visualize what you are describing without a demo.

Here are some instructions on how to create one:  http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

The way I'm understanding this is that you might do better updating the timescale() or duration() instead of trying to update end values of tweens in a timeline (which is a fairly advanced undertaking). In other words you can change the speed of the animation so that it reaches a certain amount of progress in a dynamic amount of time. 

[DragoshDX]

Hello. 

 

Since we're in a different time zone, I actually fixed the issue this morning before seeing the answer. 

 

The solution I went with was creating a separate timeline which is a mirror image of the original one and tween a simple object such as data = {percentage: 1}. By tweening the percentage property with the same duration as the first tween, I can easily hit my 50% mark (I explicitly tween up to 50 ). Then, at each onComplete event of the rest of the tweens I run a bit of code that calculates how much the next tween has to finish, then create a new tween on the separate timeline that animates from the point the first default one stopped 50 to the next specified step at 70 with the same duration as the remaining time for the next tween. Thus they are perfectly in sync. 

I grabbed the list of tweens in the original timeline using getChildren in the onComplete callback and searched for the next animation within. 

This seems to work as I expect and is pretty fast and spot on so I guess we can consider the issue solved. 

Thank you for reading though!

Dragos.