Chapter 37: Timeline (Overview)

Core Idea

A Timeline is a container for tweens and other timelines that manages their relative timing as a single controllable unit, replacing manual delay chains.

Code Examples

let tl = gsap.timeline();
tl.to("#green", { duration: 1, x: 786 })
  .to("#blue", { duration: 2, x: 786 })
  .to("#orange", { duration: 1, x: 786 });

• What it demonstrates: chaining three sequential tweens with no manual delay math — each starts when the previous one ends by default.

Key Takeaways

1. Created with gsap.timeline(), not new gsap.Timeline().
2. Every method covered in this section (.to(), .add(), labels, playback control) operates on the timeline as a whole or on its children.

Connects To

• gsap.timeline(): the creator method.
• Tween: the individual animations a Timeline sequences.