Jump to content


Kill All TimelineMax in a Website

Moderator Tag

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



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



chap2 = TimelineMax




// option 1 (not working)

//click on chap1 in top nav
//click on chap2 in top nav
// option 2 (working but tedious)
//click on chap1 in top nav
//click on chap2 in top nav

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. 

Link to comment
Share on other sites

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.


  • Like 4
Link to comment
Share on other sites

hmm.. thanks for the input.


I'll get back with a codepen soon. 



Link to comment
Share on other sites



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

Thanks for the tip.

Link to comment
Share on other sites

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

  • Like 1
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.