monospace Posted September 21, 2021 Share Posted September 21, 2021 What's the most efficient way to add a pause/delay of arbitrary length at an arbitrary position in an existing tween or timeline? I'm looking for something like addPause()but with a duration parameter as well as a position parameter. See CodePen for what I'm trying to achieve. Thanks for your time. See the Pen jOwKBBy by monospace (@monospace) on CodePen Link to comment Share on other sites More sharing options...
Solution OSUblake Posted September 21, 2021 Solution Share Posted September 21, 2021 Hi monospace! .addPause() will only work with a timeline, but you could do something like this using delayedCall. let tl = gsap.timeline() .to(".blob", { y: 200, duration: 9, ease: "none" }) .addPause(3, function(){ gsap.delayedCall(2, () => tl.resume()); }) .addPause(6, function(){ gsap.delayedCall(2, () => tl.resume()) }) 6 Link to comment Share on other sites More sharing options...
monospace Posted September 21, 2021 Author Share Posted September 21, 2021 Ooh, nice, delayedCall is exactly what I was looking for. That's like gsap's version of setTimeout, right? Link to comment Share on other sites More sharing options...
GreenSock Posted September 21, 2021 Share Posted September 21, 2021 Yep, so if you want a reusable helper function to accomplish what Blake did... function pauseFor(tl, duration, position) { return tl.addPause(position || tl.duration(), () => gsap.delayedCall(duration, () => tl.resume())); } Usage: pauseFor(tl, 2, 3); 4 Link to comment Share on other sites More sharing options...
monospace Posted September 21, 2021 Author Share Posted September 21, 2021 Fantastic. Is there a featured Helper Function page? Because that would totally belong there. Link to comment Share on other sites More sharing options...
GreenSock Posted September 21, 2021 Share Posted September 21, 2021 There are a bunch of helper functions at https://greensock.com/docs/v3/HelperFunctions, yes, but I don't really think this one warrants a place on that page because: I doubt many people would use it. That page can be overwhelming already, so we have to be careful not to add too many. It's pretty simple/basic. I'd guess that most people could do that on their own (but I could be totally wrong). Link to comment Share on other sites More sharing options...
monospace Posted September 21, 2021 Author Share Posted September 21, 2021 It's pretty basic but not obvious, and, at least to me, it's the kind of functionality that I thought would be part of the core framework but isn't. It's definitely going into my own snippets library. Link to comment Share on other sites More sharing options...
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