Why can't I pause and/or kill a timeline from another timeline?

[DrX]

Hi!

 

I've got two timelines that individually work nicely:

• tl0 slides an image. The long duration (120s) is to get the correct speed.
• tl1 has three text bullets appear in sequence (i.e. "PowerPoint" style).

 

Can someone help me get tl1 to pause and/or kill tl0 when the text has finished appearing. Thanks!

 

Lots of failed attempts in the code below:

 

let tl0 = gsap.timeline();
tl0.set("#waves", {attr: {x: -canvasWidth}})
   .to("#waves", {duration: 120, attr: {x: 0}});

 

let tl1 = gsap.timeline();
tl1.set("#text1-ln1, #text1-ln2, #text1-ln3", {opacity: 0.0})
   .set("#text1-ln1", {delay: 1.0, opacity: 1.0})
   .set("#text1-ln2", {delay: 1.0, opacity: 1.0})
   .set("#text1-ln3", {delay: 1.0, opacity: 1.0})
//   .call(console.log, ["Ended."]) // Works.
//   .call(tl0.pause); // Doesn't work.
//   .call(tl0.pause, []); // Doesn't work.
//   .call(tl0.pause, [null]); // Doesn't work.
   .call(tl0.pause, [null, false]); // Doesn't work.
//   .call(tl0.pause, [null, true]); // Doesn't work.
//   .call(tl0.pause, null); // Doesn't work.
//   .call(tl0.pause, null, ">"); // Doesn't work.
//   .call(tl0.pause, null, "<"); // Doesn't work.
//   .call(tl0.kill); // Doesn't work.
//   .call(tl0.kill, []); // Doesn't work.
//   .call(tl0.kill, [null]); // Doesn't work.
//   .call(tl0.kill, null); // Doesn't work.

 

 

 

[GreenSock]

I think you're just looking for: 

.call(() => tl0.pause());

The reason your .call(tl0.pause) wasn't working is because of a scope issue. In other words, you're passing the raw pause function to the .call() but it's not actually being called on the tl0 object itself because there's no scope defined. That's why I'm just wrapping it in a function. You could also .add(() => tl0.pause()) which does exactly the same thing.

 

Another option is to embed a tween into tl1 that animates the timeScale of tl0:

.to(tl0, {timeScale: 0, duration: 0.3})

That way, it's more gradual. 

 

Totally up to you.

 

Happy tweening!

[DrX]

Thanks so much. All the options work, but using timescale to stop tl0's clock just blew my mind!

[GreenSock]

Yeah, it's like stepping into the matrix - once you wrap your head around the fact that tweens/timelines are just objects that can have their properties animated as well...which means you can animate animations...it's pretty mind-blowing. 

[PointC]

On 12/4/2021 at 6:34 PM, GreenSock said:

it's like stepping into the matrix