Controlling multiple nested timelines - add/remove/reset timelines from master TL

[Tasty Sites 65 Likes (Contributor)]

Hello !

Got inspired by the last clean code video about dividing the animations into separate functions and controlling them via a master timeline - usually, I always created a new Tl01 02 03 04 etc then merged them into one master. 

To stop the timeline in the middle of master timelines I had to use  tl02.pause() and it worked like a charm

Now as seen in codepen the same thing does not work for the function-based master timeline - I feel like I'm missing something there.

If you guys could tell me more about controlling multiple nested timelines - or point me in the right direction it would be fantastic!
==========================================================

What I'm trying to achieve - right now I have animation with similar structure as in codepen - masterFunctions tl
Few of my timelines are out of the global one (I want them to be in global timeline just can't get them play in the right moment if they are there)

I'm trying to put all small timelines into a global one, have control when to play pause each of them and finally, on click reset EVERYTHING to initial positions and play again smoothly - right now I'm using masterFunctions.seek().play(0); for the reset, but I'm not sure that's the best option(?)

Any help will be much appreciated ! 

 

 

See the Pen mqbbZQ by Dikus (@Dikus) on CodePen

[Sahil 2,541 Likes (Superhero)]

You don't need to use seek() to play timeline.

 

As for using functions along with global timeline and pause child timeline, I am not completely sure if it is right answer. I spent some time trying to figure it out. My current solution is to create paused child timeline that gets returned by function and assign it to a variable. Then play it when you add it in master timeline. To remove timeline use masterTimeline.remove(variable) and pass that variable so you can pause it.

 

@Tasty Sites You were doing this right.

Also, you were using '.add(movebox());' which executes that function rather than passing child timeline to master timeline so use '.add(movebox)'. But when you do so you can't pause child timeline without affecting rest of the timeline that's why I am using remove method.

 

There maybe better solution but at least this will get your thread started.

 

See the Pen WXNExR?editors=1010 by Sahil89 (@Sahil89) on CodePen

 

[Tasty Sites 65 Likes (Contributor)]

Thanks Sahil,

 

That helped a lot, tho probably my question touches to many topics at once. 

 

I need to prepare more relevant demo for this because it's nth time I have problems with nested timelines  - probably  I'm doing something wrong over and over again

[Sahil 2,541 Likes (Superhero)]

Ya I felt so too, it will be a lot easier to get answers if you ask multiple questions one by one.

[Tasty Sites 65 Likes (Contributor)]

After a while, I finally know what was frustrating me and why the stuff I wrote in functions wasn't responding, and all the stuff with removing, adding, controlling wasn't working as it should - if you will ever have a problem with controlling timelines held in functions be sure to first declare a variable and then assign it to the function that returns your timeline...^_^''

@Dipscom wrote something like 

var returned_tl = tlReturned();

a tiny bit of code somewhere in the forums and huge thanks for that - now GSAP magic works the same regardless it's in function or not and my code is much much cleaner

See the Pen VXvrZm by tastysites (@tastysites) on CodePen

Thanks again for the help @Sahil