Nested timelines with onComplete

[determin1st 11 Likes (Newbie)]

Hello,

 

Is there a way to run onComplete function of all nested timelines after main timeline finished playing?

 

I have a two areas at page - one is carousel list (left <- center/current -> right) and second is menu (div with buttons) which slide to left or right. I defined a drag event which unites two effects - carousel slide and menu slide. main timeline is controlled with .progress(X, true) function and after reaching 80% limit and dropping (mouseup), state changes and both effects need to be reset in their onComplete.

 

The problem is that duration differs (first is 0.4, second is 0.6 - both start at the same time) and first effect doesn't fire onComplete after drop event plays main timeline - .play(null, false).

 

 

 

 

See the Pen veZoPJ by determin1st (@determin1st) on CodePen

[Sahil 2,541 Likes (Superhero)]

Not completely sure, but maybe you can try defining onComplete as external functions and call them. There maybe better answer, if so someone else will post it.

 

See the Pen rGwXyb?editors=1111 by Sahil89 (@Sahil89) on CodePen

 

[determin1st 11 Likes (Newbie)]

47 minutes ago, Sahil said:

Not completely sure, but maybe you can try defining onComplete as external functions and call them. There maybe better answer, if so someone else will post it.

 

I've forked your pen to explain more what i mean..

[GreenSock 8,117 Likes (Superhero)]

So are you saying that in some cases, you want slide.two to turn blue part-way through, and other times you want it to turn blue at the very end of the timeline? I don't think this is an issue of having an onComplete fire at a different time (it wouldn't make sense for it to fire at different times, and certainly a nested onComplete shouldn't fire after its parent's onComplete). Wouldn't it be best to just add some logic to your parent timeline's onComplete so that it checks whatever conditions you need to check, and acts accordingly? Perhaps I'm misunderstanding your goal, though. 

[determin1st 11 Likes (Newbie)]

1 hour ago, GreenSock said:

So are you saying that in some cases, you want slide.two to turn blue part-way through, and other times you want it to turn blue at the very end of the timeline? I don't think this is an issue of having an onComplete fire at a different time (it wouldn't make sense for it to fire at different times, and certainly a nested onComplete shouldn't fire after its parent's onComplete). Wouldn't it be best to just add some logic to your parent timeline's onComplete so that it checks whatever conditions you need to check, and acts accordingly? Perhaps I'm misunderstanding your goal, though. 

 

I would like slide.two to turn blue only at the very end of main timeline (before slide.one=red, slide.zero=green).

Call order could be: blue -> red -> green

 

There might be logic in parent onComplete, but when i call parent's .play(), it still fires child onComplete regardless to second parameter (supressEvents=true).

 

 

 

 

 

[GreenSock 8,117 Likes (Superhero)]

The reason the blue one isn't toggling is because you set suppressEvents to true on your progress(0.4, true) call. Thus, it is honoring your request NOT to call that onComplete when moving the playhead to the new position. It's working exactly as expected. If you want it to get called, you can simply omit that parameter or set it to false (the default). Here's a forked version:

 

See the Pen eGEZez?editors=0010 by GreenSock (@GreenSock) on CodePen

 

By the way, you don't need to pause all your timelines when you create them and then play() them later in that same tick. It only hurts performance (very slightly) and doesn't help in any way. As long as the code is run in the same tick (requestAnimationFrame cycle), it's all perfectly synchronized (unlike some other animation libraries). 

 

If you need to have that callback suppressed initially on that progress(0.4) call and you just want to do the cleanup at the end, you could implement logic like this:

See the Pen zEdqpN?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Does that help at all? 

[determin1st 11 Likes (Newbie)]

2 hours ago, GreenSock said:

Does that help at all? 

Yes, thanks. I will try another approach.

[determin1st 11 Likes (Newbie)]

finally made that menu interface with the power of GSAP animation 8)

 

https://rawgit.com/determin1st/cis/master/view/index.html

 

I think there are  some problems with flexbox + className animation - it doesnt respect flex-direction and changes both width and height, but maybe I dont do it right.. another thing is that timeline doesnt pause automatically when reaches the end. but those are avoidable.