Kill All TimelineMax in a Website

[icdindia 8 Likes (Newbie)]

Hi,

 

First of all thank you for developing such an amazing lib and it has made our lives much simpler.

 

We are developing a major website using greensock where all the animations are being handled by various timelines. 

it is a single page website so there is no page refresh.

 

The top navigation helps navigating between timelines by tl.play().

These timelines also have a loop of flickering text set to repeat -1

 

The issue arrises when we load a new timeline and go back to the previous timeline. Then the loop starts running twice and the page crashes.

I wish to kill all timelines on the document whenever a new timeline is loaded. 

Because there are like 20 chapters, it would be very very tedious to kill all animations on every click.

 

I tried using TweenMax.killAll();

this abruptly kills all animations ( even if i have an animation playing ) and the next animation doesnt play.

 

I tried using chap2.kill();

this works nicely but is not expandable. There are going to be 20 chapters which will make developer's life miserable.

 

My code :

 

chap1 = TimelineMax

chap1.to(something)

 

chap2 = TimelineMax

chap2.to(something)

 

 

// option 1 (not working)

//click on chap1 in top nav

TweenMax.killAll();

chap1.play(0);

 

//click on chap2 in top nav

TweenMax.killAll();

chap2.play(0);

 

 

// option 2 (working but tedious)

//click on chap1 in top nav

chap2.kill();

chap1.play(0);

 

//click on chap2 in top nav

chap1.kill();

chap2.play(0);

 

 

Can you please help me out over here. How to use killAll to enable a seamless display of animation.

 

I was short on time so didnt make a codepen. If my query is not clear I will make a codepen n provide the details too.

 

Thanks for your product. I hope it will keep on becoming better every day. 

[PointC 8,599 Likes (Superhero)]

Hi icdindia 

 

Welcome to the GreenSock forum.

 

I'm not sure I understand what you're asking. If you kill() a timeline, how would they play it again?  Is the user only allowed to see a timeline once? From your description, I'd say this would be a perfect case to create all your timelines in functions and return them to a master timeline. You could then play that master timeline at any position by adding labels and the user could jump around all they wanted.

 

As far as an infinite timeline of flickering text on the page goes, wouldn't that be better as its own timeline so it could just loop no matter what the user is doing with the main timeline? I wish I could be of more help, but I'm not quite sure what the end result should be here.

 

Yes - if you could provide a CodePen demo with some more details, that would be most helpful.

 

Happy tweening.

[icdindia 8 Likes (Newbie)]

hmm.. thanks for the input.

 

I'll get back with a codepen soon. 

 

Thanks.

[icdindia 8 Likes (Newbie)]

Hi,

 

I have added all tweens to one timeline and my life is much easier now.

Thanks for the tip.

[Carl 9,066 Likes (Superhero)]

I don't think I understand exactly what you are describing but by keeping a reference to the current animation you can create a system that pauses the current animation whenever a button is clicked and then play a "new" current animation like so:

 

See the Pen bWvYmM?editors=0010 by GreenSock (@GreenSock) on CodePen