Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
determin1st

Nested timelines with onComplete

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

Link to comment
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

 

Link to comment
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..

Link to comment
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
Link to comment
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).

 

 

 

 

 

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

2 hours ago, GreenSock said:

Does that help at all? 

Yes, thanks. I will try another approach.

Link to comment
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.

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×