Jump to content
determin1st

Nested timelines with onComplete

Recommended Posts

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).

 

 

1.jpg.c797c2e63002445c74092d87292487f5.jpg2.jpg.6266488ef5f70194f82c0fa7f5721e64.jpg

 

 

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

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites
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..

Share this post


Link to post
Share on other sites

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. 

  • Like 1

Share this post


Link to post
Share on other sites
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).

 

 

 

 

 

Share this post


Link to post
Share on other sites

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? 

  • Like 3

Share this post


Link to post
Share on other sites
2 hours ago, GreenSock said:

Does that help at all? 

Yes, thanks. I will try another approach.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.