Chapter 34: gsap.updateRoot()

Core Idea

gsap.updateRoot() lets advanced users (typically game developers) manually drive GSAP's root timeline with a custom time value instead of relying on its internal requestAnimationFrame loop.

Key Concepts

• Unhooking first: you must remove GSAP's own ticker call before driving it manually, otherwise both the internal loop and your manual calls would fight over timing.
• Manual time: any call passes the exact time in seconds you want the root timeline set to.

Code Examples

// unhook GSAP's own ticker
gsap.ticker.remove(gsap.updateRoot);

// manually set the root time to 20 seconds
gsap.updateRoot(20);

• What it demonstrates: disconnecting GSAP from its default RAF-driven clock and substituting a custom time source (e.g. a game engine's own clock).

Key Takeaways

1. This is a niche, advanced API — most projects should never need it since GSAP's default RAF timing is already synced with the browser.
2. Forgetting to unhook the default ticker first leads to conflicting/duplicate time updates.

Connects To

• gsap.ticker: the default mechanism this replaces when driving time manually.