[Nested timelines with onComplete]

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

[Detect reverse start event]

Hello Rodrigo,

 

thanks for your workaround, but i really like non-imperative-declarative style..

 

i have a button with hover-gsap-TimelineLite tween-effect witch is invoked inside mouseover -> play(), and reversed inside mouseout -> reverse().

when this effect completes, onComplete creates a yoyo-tween which applies more animation to this button changing from the same value {scale} as in first effect.

now, the need is to reverse yoyo-tween to the complete state of first effect and then, to continue reversing first TimelineLite.

 

maybe i'm going the wrong way doing this [e1->e2, e1<-e2] animation.

anyway, thanks for reading.

[Change Easing for Timeline-Reverse]

suppose, it would be much safer to change ease IF there were onReverse event..

[How stop a TweenMax looped with "yoyo" paramater]

while stopping yoyo-tween,

 

how to return to it's first state smothly?

[Detect reverse start event]

reverse() isn't called in yoyo:true case. so, if we have to stop the tween with yoyo, we need onReverse event. the code bloat happens at user side. not good.