Chapter 19: gsap.globalTimeline

Core Idea

gsap.globalTimeline is the root Timeline that drives every GSAP animation, giving you one lever to pause, resume, or rescale the speed of everything at once.

Key Concepts

• Type: Timeline.
• .timeScale(): multiplier affecting the playback rate of all animations (e.g. 0.5 for half-speed, 2 for double-speed) by changing how fast the root timeline itself advances, not each child individually.
• DelayedCalls included: since delayedCall() is technically a tween, pausing/rescaling the global timeline also affects delayed calls — use gsap.exportRoot() if you need to exclude them.
• isActive() quirk: always returns true on the global timeline regardless of whether anything is actually animating, since the timeline itself is always "running".

Code Examples

gsap.globalTimeline.timeScale(0.5); // half speed, everything
gsap.globalTimeline.timeScale(2); // double speed, everything
gsap.globalTimeline.pause(); // pause everything

• What it demonstrates: globally slowing, speeding up, or pausing all GSAP animation with one call.

Key Takeaways

1. This is the tool for "pause/slow down the whole app's animation," e.g. for a game pause menu or a debugging slow-motion mode.
2. If you need to exclude delayed calls or scope the effect to only pre-existing animations, use gsap.exportRoot() instead.

Connects To

• gsap.exportRoot(): scoped alternative that excludes animations created after the export.
• Timeline.timeScale(): same mechanism, usable on any timeline, not just the global one.