Jump to content
Search Community

Clear & Restart a timeline

MGTH test
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



so i've been away wondering the wilds for a long long time .. wow you guys have been busy while i've been away .. well done on all the hard work !!


i'm trying to get my head back into things and could do with a wee bit of help please :)



i'm creating a timeline then adding content to it .. i want to restart the timeline dumping all the content added in the previous run.


here's a codepen that i have been playing with that kinda simplifies what i'm doing !!


so if you .. play the timeline .. add the red/blue/green anims .. restart the timeline and play it again .. it plays with the previously added anims. 


See the Pen slAwC by MGTH (@MGTH) on CodePen


i'm new to codepen so hope it works .. any help would be really appreciated.




One other question .. why if you run the script .. then click restart does it skip the pause a the beginning of the timeline ??



Link to comment
Share on other sites

Hi Rory,


One thing is to add the tweens to the timeline through a function, call that function on document ready or window load(as it fits better to your app) and on the clear event pause your timeline at the beginning, clear it and finally call the function again.


Also use a simple TweenLite.set() instance to get your elements to their initial states (opacity, position, size, etc.) and when you create the timeline instance set it to be paused.


I've forked your pen, you can see it here:

See the Pen zxtkC by rhernando (@rhernando) on CodePen


Hope this helps,



Link to comment
Share on other sites

First, thanks for the codepen, Rory. Great work. 


Actually I couldn't replicate any problems.


following these steps:


load page

click play

3 boxes move right

click clear() to remove previous tweens

click red, green, blue (animations start playing in that order)

click restart 

only red, green, blue animations play


To me it appears clear is working as it should.

Are there different steps I should be following?




For your second question


why if you run the script .. then click restart does it skip the pause a the beginning of the timeline ??



I couldn't replicate anything funny here either


click play

animation plays

click restart

playhead jumps back to beginning and gets "stuck" at pause (screen blank)

click play() then animation plays fine from beginning




Again, maybe I'm missing something. 

Link to comment
Share on other sites

hey Rodrigo and Carl


"I've forked your pen" .. he he .. is it just me or does that sound slightly dodgy ?!


Rodrigo thank you very much that should do the trick .. really appreciate your time and for forking my pen :) i'll have a good play around with it tomorrow .. cheers



Carl .. thank you too .. the time you guys put into helping people is amazing !!


i wasn't pointing out a problem just looking for help on how to go about adding to a timeline then dumping all of the added content.


the pause thing is still confusing me .. to replicate it run the script .. then press restart nothing else.


i assumed the timeline would restart from 0 and play to the pause but instead it plays through to the end ?! if you press restart again it plays from 0 to the pause ?!

Link to comment
Share on other sites

Thanks for the clarification. 

This can be a tricky concept to wrap your head around.


lets investigate the first line of code from your timeline:


.to([red, blue, green], 0, {autoAlpha:0, onComplete:master_pause})


Its easy to assume that this would pause the timeline at a time of 0, but not always. You are still calling a function that needs to execute and that can take some amount of time, although miniscule. When the timeline is first created the pause is added at a time of 0 as the timeline hasn't yet played and master.time() is 0 when master_pause is called.


Since the tween has no duration, it renders and completes immediately as the timeline is being built, again at this point in time the timeline also has no duration and thus the insertion point is a time() of 0. 


BUT on subsequent restarts the timeline attempts to play, the timeline does have a duration and it progresses just an eeensy weensy bit between the time master_pause is called and master.pause() executes.


To get a better sense of what is happening changing master_pause to this


function master_pause(){
  console.log("paused at time() " + master.time());

open up dev tools and look at the javascript console.

run the codepen


you will see:

paused at time() 0 


hit restart()


the animation will play


hit restart a bunch more times and you will see logs like:


paused at time() 0.006000000000002004 pen.js:87
paused at time() 0.024000000000002686 pen.js:87
paused at time() 0.006000000000002004 pen.js:87
paused at time() 0.023999999999997357 pen.js:87
paused at time() 0.031499999999995865 pen.js:87
paused at time() 0.02549999999999919 pen.js:87
paused at time() 0.023999999999997357 pen.js:87
paused at time() 0.0045000000000001705 pen.js:87
paused at time() 0.02549999999999919 
those numbers represent the small amount of time between master_pause() being called and master.pause() being executed. 
Hopefully this helps clarify things. 
To get the efffect you are after just try this as your initial timeline code:
master = new TimelineMax({paused:true});

master.fromTo([red, blue, green], 1, {autoAlpha:0}, {autoAlpha:0.5}, "lSTART")
.to([red, blue, green], 1, {x:100}, "-=1");
  • 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.
  • Create New...