Chapter 13: gsap.exportRoot()

Core Idea

gsap.exportRoot() moves all current root-level tweens, timelines, and delayed calls into a new Timeline instance, letting you control everything that exists so far (e.g. slow it all down) without affecting animations created afterward.

Key Concepts

• Returns: a new Timeline containing everything that was previously loose on the root.
• Isolation boundary: only tweens/timelines that existed at the moment of the call are captured; anything created after is unaffected.
• Repeatable/nestable: calling it again wraps the current root (including the first exported timeline) into another timeline — can be nested arbitrarily.
• Caveat: completed tweens/timelines are already removed from the root for garbage collection, so exporting after they finish won't include them.

Code Examples

var tl = gsap.exportRoot();
gsap.to(tl, { duration: 0.5, timeScale: 0 }); // slow everything captured to a stop
// new animations created after this point are unaffected
gsap.fromTo(myWindow, { scaleX: 0, scaleY: 0 }, { duration: 1, scaleX: 1, scaleY: 1 });

• What it demonstrates: freezing every existing animation (e.g. for a game pause) while a new, independent animation still plays normally.

Key Takeaways

1. Useful for "pause everything so far, animate something new on top" scenarios (game pause menus, modal overlays).
2. Because it's just a Timeline, you can pause(), resume(), reverse(), or tween its timeScale like any other timeline.

Connects To

• Timeline.timeScale: commonly tweened on the exported root to speed up/slow down/freeze everything at once.