Chapter 29: gsap.ticker

Core Idea

gsap.ticker is GSAP's internal heartbeat — it updates the global timeline on every requestAnimationFrame, and you can attach your own listener functions to run custom logic each tick.

Key Concepts

• Type: Object with .add() / .remove() for listener management.
• Callback parameters: each listener receives the total elapsed time (seconds), the delta since the last tick, the frame count, and whether the tick was deliberately delayed.
• Sync guarantee: listeners run after the core engine updates each frame, in sync with the browser's render cycle.

Code Examples

gsap.ticker.add(myFunction);

function myFunction(time, deltaTime, frame) {
  // runs every tick, after GSAP updates
}

gsap.ticker.remove(myFunction);

• What it demonstrates: hooking into GSAP's own render loop instead of running a separate requestAnimationFrame loop.

Key Takeaways

1. Piggybacking on gsap.ticker avoids running a second, unsynced RAF loop alongside GSAP's own.
2. Useful for game loops or any per-frame logic that should stay perfectly in step with GSAP animations.

Connects To

• gsap.globalTimeline: what the ticker is actually driving each frame.