Is it possible to queue tweens with TweenLite?

[dominate 0 Likes (Newbie)]

What I want to achieve is:

 

- Create a tween on myobj and play, let say x:"+=200"

- Some other time another "additive" tween may be created, ie., x:"+=200" more!.

- So, as a result myobj should go x:"+=400".

 

- To do that, second tween should wait the first one, and then run when it finishes. Moreover, if more tweens come later, they should wait all the previous ones.

- Please note that it is unknown how many tweens would exist. They come dynamically.

 

My question is if it is possible to queue like this using TweenLite, or I need TimelineLite.

 

Thanks.

[Diaco 1,948 Likes (Superhero)]

Hi dominate 

 

it's better to use Timeline , you can add tweens to tl and the new tweens will add at the end of timeline , however if you want to just load TweenLite , there's " onComplete " callback for tweens : http://greensock.com/docs/#/HTML5/GSAP/TweenLite/eventCallback/

 

you can define onComplete callback with these ways :

var myAnimation = TweenLite.to(obj,1,{...});
myAnimation.eventCallback("onComplete", myFunction);

or

TweenLite.to(obj,1,{... , onComplete : myFunction });

[OSUblake 9,990 Likes (Superhero)]

Like Diaco said, you can do that with callbacks. Here's an example of that I made for a similar question.

See the Pen xGMYmW?editors=001 by osublake (@osublake) on CodePen

 

You could also use promises. Here's a promise wrapper for GSAP. It uses the Bluebird promise library.

https://github.com/mattdesl/gsap-promise

[dominate 0 Likes (Newbie)]

Thanks for replies. So it is better to use Timeline, since if not it must be necessary to maintain a map of tweens.

[OSUblake 9,990 Likes (Superhero)]

Whatever works best for you situation. It's hard to say if one way is better than the other. A map is nice because you can reorder or remove them fairly easily. Notice how in the example I linked to that it was pulling tweens from the front instead of the back. That would be much harder to do with a timeline.

 

Promises are also nice because you can cancel them and even setup an alternate animation if it gets canceled.