DrX Posted December 4, 2021 Posted December 4, 2021 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.
Solution GreenSock Posted December 4, 2021 Solution Posted December 4, 2021 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 Posted December 4, 2021 Author Posted December 4, 2021 Thanks so much. All the options work, but using timescale to stop tl0's clock just blew my mind! 1
GreenSock Posted December 5, 2021 Posted December 5, 2021 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. 2
PointC Posted December 6, 2021 Posted December 6, 2021 On 12/4/2021 at 6:34 PM, GreenSock said: it's like stepping into the matrix 1
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now