Share Posted September 30, 2017 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 Link to comment Share on other sites More sharing options...
Share Posted September 30, 2017 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 Link to comment Share on other sites More sharing options...
Author Share Posted September 30, 2017 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.. Link to comment Share on other sites More sharing options...
Share Posted September 30, 2017 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. 1 Link to comment Share on other sites More sharing options...
Author Share Posted September 30, 2017 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). Link to comment Share on other sites More sharing options...
Share Posted October 1, 2017 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? 3 Link to comment Share on other sites More sharing options...
Author Share Posted October 1, 2017 2 hours ago, GreenSock said: Does that help at all? Yes, thanks. I will try another approach. Link to comment Share on other sites More sharing options...
Author Share Posted October 5, 2017 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now