Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
monospace

Add a pause or delay in an existing tween

Go to solution Solved by OSUblake,

Recommended Posts

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

  • Solution

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())
  })

 

  • Like 6
Link to comment
Share on other sites

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

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);

 

  • Like 4
Link to comment
Share on other sites

Fantastic. Is there a featured Helper Function page? Because that would totally belong there.

 

Link to comment
Share on other sites

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:

  1. I doubt many people would use it. That page can be overwhelming already, so we have to be careful not to add too many.
  2. 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

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

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.
×