Clear & Restart a timeline

[MGTH]

yo

 

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 ??

 

Rory

[Rodrigo]

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,

Cheers,

Rodrigo.

[Carl]

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. 

[MGTH]

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 ?!

[Carl]

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(){
  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:

 

// TIMELINE
master = new TimelineMax({paused:true});
master.timeScale(1.5);


master.fromTo([red, blue, green], 1, {autoAlpha:0}, {autoAlpha:0.5}, "lSTART")
.to([red, blue, green], 1, {x:100}, "-=1");

[MGTH]

cheers Carl .. yeh think i can get my head round that !!