Restart multiple different timeline onComplete

[dghez]

Hi everyone,

like you can see in the codePen I'm working on something like an app-onboarding.

It's one of my first "serious" TweenMax project and I'm still not a pro so maybe you can see some errors somewhere, but my question is another.

Like you can see at the end I would restart the entire animation, but I made it with a main timeline and some secondary timelines (some are nested inside the main one, some are external). Like you can see if you try to restart the animation more than one time something is going wrong, and I cannot understand why because in you check the "onComplete" function I set the other timeline to the beginning using "tlLeaving.play(0)".

What am I doing wrong?

Thanks!

See the Pen VeGwgp?editors=0010 by anon (@anon) on CodePen

[Carl]

Thanks for the demo, the animation is really beautiful.

 

To get the best (and quickest) help it would be great if you could reduce that demo to the bare minimum. It shouldn't take 100 lines of code to illustrate an animation not restarting. Also please be more descriptive than saying "something is wrong". Unfortunately it can take a lot of time for fresh eyes to watch that animation, figure out which assets are animating in which timeline and which ones aren't working.

 

Forexample something like "when the animation first plays, the ghost and the stars animate but when you hit restart the stars are missing". In such a case the demo should only include ghost and the stars.

 

Thanks

[dghez]

First of Carl thanks for the reply

 

Btw, let me explain better.

I divide the timeline in this way:

 

- tlMain: is where I create the main timeline (tlOpening + tlFunny (tlFunny is the timeline of the jumping ghost))

- tlLeaving: is the timeline for let the stuff go away.

- tlRewind: is the timeline for the rewind cta

 

 

If you run the animation for the first time everything is fine, then at the end if you click replay and the end of the tlRewind there is a callback with tlMain.restart() e tlLeaving.pause(0), [tlLeaving.pause(0) is needed to bring the time of the timeline to 0 and ready to play again] BUT on the second time of the animation you can see that only the ghost & the texts are leaving (that's the different behavior i'm trying to fix).

[Acccent]

Hi @dghez,

 

I believe I solved the issue... I was just cleaning up the code to understand it and fixed it without realising.

 

See the Pen RrYEaL?editors=0010 by Acccent (@Acccent) on CodePen

 

 

I think the issue lied within your randomstars function. I changed the TweenMax that were inside with a TimelineMax, that is paused when you click on Let's Start (before tlLeaving starts). tlLeaving is also invalidated before starting so that it acknowledges the current positions of the stars and ovals.

 

Be aware that I also removed the 'leaving' variable which I think wasn't very useful, and tlFunny which was unrelated to the problem.

 

Let me know if this helps

[dghez]

Acccent thanks, I really appreciate that!

I'm going to check what .invalidate() function does because I've never heard it.

 

Talking about the funtion randomstars I saw that you put it into a timeline with a repeat:-1 and yoyo:true, keeping my settings (the random values function inside staggerTo) but in your case (you can see that) the random function is working only the first time, when the timeline is initialized, so the stars always follow the path from A -> B and not randomly.

In the original one, I used TweenMax.staggerTo because in this way the values/path changes every time A -> B -> C -> D ..... etc.

How can we solve that?

 

Thanks again!

 

 

 

Hi @dghez,

 

I believe I solved the issue... I was just cleaning up the code to understand it and fixed it without realising.

 

See the Pen RrYEaL?editors=0010 by Acccent (@Acccent) on CodePen

 

 

I think the issue lied within your randomstars function. I changed the TweenMax that were inside with a TimelineMax, that is paused when you click on Let's Start (before tlLeaving starts). tlLeaving is also invalidated before starting so that it acknowledges the current positions of the stars and ovals.

 

Be aware that I also removed the 'leaving' variable which I think wasn't very useful, and tlFunny which was unrelated to the problem.

 

Let me know if this helps

[Acccent]

Well, one simple solution is to call the randomstars function when tlStars is complete, instead of having the animation loop forever. That way it creates a new animation with new values.

 

You can see it here: 

See the Pen RrYEaL?editors=0010 by Acccent (@Acccent) on CodePen