When working with multiple animations on a web page, it's important to have a way to control their order and timing. GSAP timelines provide a powerful solution for sequencing and synchronizing several tweens, making complex animation flows easy to manage. A timeline acts like a container for your tweens, allowing you to play, pause, or reverse an entire animation sequence with a single command. Timelines are especially useful when you want to coordinate several elements so that their animations happen one after another, overlap, or start at precise times.

The example above shows how you can use a timeline to create a sequence: the red box moves right, then the green box moves down, and finally the blue box spins. Timelines offer several methods to control animation flow:

• to: animates properties from their current value to the specified value;
• from: animates properties from a given value to their current value;
• fromTo: specifies both the starting and ending values for the animation;
• add: inserts a tween or callback at a specific point in the timeline;
• play: starts or resumes the timeline;
• pause: stops the timeline at its current position.

By chaining tweens on a timeline, you can choreograph complex sequences with minimal code, ensuring that each animation starts exactly when you want it to.