Add a delay on a onComplete (timeineMax)

[saitansky]

I've searched a lot and nothing seem to answer if we can or cannot add a delay on a onComplete. I want to wait, example 5 second before executing the function I call. 

There plenty way to do it, like adding a ending animation that don't really animate with a duration, adding a javascript timer in my new function before beginning, etc. But I wanted something more elegant like (P.S. I don't want to add the delay on my next animation ideally) :
 

var tl_section05_01 = new TimelineMax({onComplete:step02[delay:1]}); --> I know this wont work hihi its just a example

or

tl_section05_01.eventCallback('onComplete', step02, delay:5); --> I will have like to be able to add a delay on a eventCallBack in a timeline, it's is possible?

 

But I can't figure if its possible and how put a delay on a onComplete event. 

 

Basically, when my timeline finish, I want to execute a function after 5 sec, to give a break between my animation and the next function

Thx you very much in advance,

Alex 

[GreenSock]

I'm curious if there's a reason you're not simply nesting timelines. There are a lot of benefits to that, like being able to control the entire thing as a whole, scrubbing forwards or backwards, etc. Have you read this article?: 

https://css-tricks.com/writing-smarter-animation-code/

 

For example...

var tl1 = new TimelineMax();
tl1.to(...); //add whatever tweens

var tl2 = new TimelineMax(); 
tl2.to(...); //add whatever tweens

var master = new TimelineMax();
master.add(tl1);
master.add(tl2, "+=5"); //add after 5-second gap

 

You don't have to add an empty tween to create the spacing either, as you seemed to mention in your post. You could just add a callback wherever you want:

var tl = new TimelineMax();
tl.to(...); //add whatever tweens
tl.add(yourFunction, "+=5"); //adds a function call after a 5-second gap

 

You could use the call() method if you prefer. 

 

But if you really want to build things in a callback-driven way, I suppose you could do this:

var tl = new TimelineMax({onComplete:function() {
    TweenLite.delayedCall(5, yourFunction);
}});

 

(Though my personal opinion is that's the least elegant solution)

 

Does that help?

[saitansky]

Hi Jack,

 

Thx for the answer (Im feeling a bit bad/sad to have forget about the possibility to add function into a add hihi). The second one (add) is the one i was looking for. 

 

 

The reason why I don't use nested its because the project is a interactive comic book, where we have 21 section (different from each other) and each section have different scene in it (multiple small animation that don't have influence over others) I've found multiple small timeline easier to work with in my case. The only thing following is the UI-UX and you cant come back from one section to another, even scene are always going forward. its part of the story (multiple ending and every choice you make influence the story and you need to endorse every one of  them) Maybe i will use a master for every section.

 

Thx for the article and the answer , have a great day,
Alex