Chapter 11: gsap.delayedCall()

Core Idea

gsap.delayedCall() invokes a function after a set time, synced to GSAP's render loop (unlike setTimeout, which can fire outside the screen refresh cycle), and returns a killable Tween.

Key Concepts

• Returns a Tween: a delayed call is implemented as a Tween whose target is the function itself, so it can be killed like any tween.
• Parameters array: pass an array as the third argument to forward arguments to the callback.

Code Examples

gsap.delayedCall(1, myFunction, ["param1", "param2"]);

function myFunction(param1, param2) {
  // runs 1 second later, in sync with GSAP's ticker
}

// cancel it later:
var call = gsap.delayedCall(1, myFunction);
call.kill();

// or without keeping a reference:
gsap.killTweensOf(myFunction);

• What it demonstrates: scheduling a callback with arguments, and two ways to cancel it before it fires.

Key Takeaways

1. Prefer this over setTimeout when timing needs to stay in sync with other GSAP animations (e.g. pausing everything also pauses delayed calls tied to the same timeline).
2. Because it's a real Tween, gsap.killTweensOf(fn) cancels it without needing to keep a variable reference.

Connects To

• gsap.killTweensOf(): standard way to cancel a delayed call without a stored reference.