What is the difference between gsap.delayedCall and setTimeout?

Both run a function after a delay, but delayedCall runs on GSAP's ticker while setTimeout runs on the browser's wall clock. That means a delayedCall pauses when you pause GSAP's global timeline, speeds up or slows down with a global timeScale, and stays in sync after a backgrounded tab through GSAP's lag smoothing. It also returns a Tween, so you get .kill(), .pause(), and .restart() instead of manually tracking a timeout handle. Use setTimeout only when you specifically want a timer independent of GSAP.

How do I cancel a gsap.delayedCall?

Store the return value and call .kill() on it: `const call = gsap.delayedCall(3, fn); call.kill();`. To restart the countdown from zero instead of cancelling, call `call.restart(true)`. This is cleaner than the clearTimeout dance because the same handle also lets you pause, resume, and reverse.

Can gsap.delayedCall repeat on an interval?

Not on its own, it's a one-shot. For a recurring callback, use a tween with `repeat: -1` and `repeatDelay`, for example `gsap.to({}, { repeat: -1, repeatDelay: 1, onRepeat: fn })`, or `gsap.ticker.add(fn)` for work that runs every frame. delayedCall fires exactly once unless you manually .restart() it.

Should I use gsap.delayedCall or the delay property on a tween?

Use the tween's own `delay` when the thing you're delaying is an animation. `gsap.to('.box', { x: 100, delay: 0.5 })` waits half a second, then animates. Use gsap.delayedCall when there is no animation, you just want to run a plain function after a wait, on GSAP's clock. If you find yourself writing `gsap.to({}, { duration: 0, delay: n, onComplete: fn })`, that's exactly what delayedCall is a shorthand for.

Does gsap.delayedCall work inside a timeline?

You can add one, but the idiomatic choice inside a timeline is timeline.call(fn, params, position), which schedules the callback at a position on that timeline so it scrubs and reverses with the sequence. Reserve gsap.delayedCall for standalone one-shot delays that aren't part of a timeline you're already building.

Core

gsap.delayedCall()

gsap.delayedCall is a GSAP core method that runs a function once after a set number of seconds, like `setTimeout`, but on GSAP's own clock instead of the browser's. Because it returns a Tween, you can cancel it, pause it, restart it, or drop it into a timeline, and it speeds up, slows down, and pauses along with every other GSAP animation on the page.

Updated July 1, 2026

Mechanics

How gsap.delayedCall works

The signature is gsap.delayedCall(delay, callback, params, scope). delay is in seconds, callback is the function to run, params is an optional array of arguments passed to it, and scope is what this resolves to inside it. It returns a Tween, which is the whole reason to use it over setTimeout.

script.js

Under the hood it is a zero-duration tween with a delay, so everything you can do to a tween works here. Store the return value and call .kill() to cancel the pending call, .pause() / .resume() to hold it, or .restart() to run the timer again from zero.

script.js

It runs on GSAP's ticker, not window.setTimeout. So gsap.globalTimeline.timeScale(2) makes every pending delayedCall fire twice as fast, pausing the global timeline pauses it, and GSAP's lag smoothing keeps it in step with the rest of your animation after a tab is backgrounded. A raw setTimeout ignores all of that and fires on its own wall-clock schedule.

delayedCall vs timeline.call

gsap.delayedCall is for a standalone 'wait, then fire' outside any sequence. When the wait belongs inside a sequence you're already building, use timeline.call(fn, params, position) instead, so the callback is scheduled at a position on that timeline and scrubs, reverses, and pauses with it.

When

Reach for gsap.delayedCall when

You want a setTimeout that pauses and scales with the rest of your GSAP animation (a delayed toast, an auto-advancing carousel step, a 'reveal the hint after 3s' beat)
You need to cancel or reset a scheduled call cleanly, .kill() and .restart() beat juggling clearTimeout handles
The delay should honor a global timeScale you're using for slow-motion, debugging, or a reduced-motion pass
You're scheduling a one-shot side effect (fire analytics, swap an image, unlock pointer events) a fixed time after something else, without wiring it into a full timeline

Alternatives

Use something else when

The wait is one step in a sequence you're already sequencing, use timeline.call() (or an empty tl.to({}, { duration }) gap) so it lives on the same timeline
You want the callback to REPEAT on an interval, use a tween with repeat: -1 and repeatDelay, or gsap.ticker for per-frame work, delayedCall is a one-shot
You need code to run exactly when a specific animation ends, use that tween's onComplete callback so the timing is bound to the motion, not a hardcoded delay
You genuinely want a wall-clock timer that ignores GSAP's clock entirely (a network timeout, a session expiry), plain setTimeout is the right tool

In production

Used in these Annnimate components

The 'wait a beat, then act' pattern shows up all over the library. Where it lives inside a running timeline it's an empty-tween gap or timeline.call; where it's a standalone countdown, gsap.delayedCall is the match.

The Typewriter paces every 'type the next character', 'hold on the finished phrase', and 'wait before deleting' beat as timed steps on one GSAP timeline (tl.to({}, { duration })), the in-timeline sibling of delayedCall. Because it's all on GSAP's clock, visibilitychange pauses and resumes the whole thing in one call instead of chasing loose setTimeout handles
The Counter delays the start of its count-up through its timeline's delay, so the number only begins ticking after the configured wait, and that wait scales with any global timeScale the same way a delayedCall would

Why the GSAP clock matters for accessibility

prefers-reduced-motion adoption passed 50% of mobile sites in 2024, up from 34% in 2022 (Web Almanac 2024). A common reduced-motion pattern is dropping every animation to near-zero time via gsap.matchMedia, and pending gsap.delayedCall timers collapse with it because they share the clock. Bare setTimeout calls keep firing on their original schedule and desync from the reduced version.

Used in components

See it running in production

CounterA number that counts up as you scroll to it, either rolling like an odometer with each digit spinning on its own, or ticking up smoothly.

TypewriterTypes out a list of phrases one letter at a time, pauses on each, then deletes it and moves to the next.

FAQ

Common questions

What is the difference between gsap.delayedCall and setTimeout?: Both run a function after a delay, but delayedCall runs on GSAP's ticker while setTimeout runs on the browser's wall clock. That means a delayedCall pauses when you pause GSAP's global timeline, speeds up or slows down with a global timeScale, and stays in sync after a backgrounded tab through GSAP's lag smoothing. It also returns a Tween, so you get .kill(), .pause(), and .restart() instead of manually tracking a timeout handle. Use setTimeout only when you specifically want a timer independent of GSAP.
How do I cancel a gsap.delayedCall?: Store the return value and call .kill() on it: const call = gsap.delayedCall(3, fn); call.kill();. To restart the countdown from zero instead of cancelling, call call.restart(true). This is cleaner than the clearTimeout dance because the same handle also lets you pause, resume, and reverse.
Can gsap.delayedCall repeat on an interval?: Not on its own, it's a one-shot. For a recurring callback, use a tween with repeat: -1 and repeatDelay, for example gsap.to({}, { repeat: -1, repeatDelay: 1, onRepeat: fn }), or gsap.ticker.add(fn) for work that runs every frame. delayedCall fires exactly once unless you manually .restart() it.
Should I use gsap.delayedCall or the delay property on a tween?: Use the tween's own delay when the thing you're delaying is an animation. gsap.to('.box', { x: 100, delay: 0.5 }) waits half a second, then animates. Use gsap.delayedCall when there is no animation, you just want to run a plain function after a wait, on GSAP's clock. If you find yourself writing gsap.to({}, { duration: 0, delay: n, onComplete: fn }), that's exactly what delayedCall is a shorthand for.
Does gsap.delayedCall work inside a timeline?: You can add one, but the idiomatic choice inside a timeline is timeline.call(fn, params, position), which schedules the callback at a position on that timeline so it scrubs and reverses with the sequence. Reserve gsap.delayedCall for standalone one-shot delays that aren't part of a timeline you're already building.

PreviousCallbacksCallbacks are functions GSAP runs at fixed points in a tween or timeline's lifecycle: onStart when it begins, onUpdate on every frame it advances, onComplete when it finishes, and onReverseComplete when it finishes playing back to the start.Nextgsap.getProperty()gsap.getProperty is a GSAP core method that reads an element's current value for a given property, returning a real number instead of a CSS string so you can do math with it directly.