3. Using Timelines and Sequence Management
A Timeline is a powerful GSAP feature that allows you to group multiple Tweens together and control them like a single parent. It makes managing complex sequences easy.
3.1. Basic Timeline Creation and Usage
Create a Timeline and chain Tweens together to make them run in sequence.
const tl = gsap.timeline({ defaults: { ease: "power1.out" } });
tl.to(".step-1", { duration: 0.5, opacity: 0, y: -20 }) // 1. Runs first
.from(".step-2", { duration: 1, scale: 0, stagger: 0.2 }) // 2. Runs in sequence
.to(".step-3", { duration: 0.8, x: 50 }, "+=0.5"); // 3. Starts 0.5 seconds after the second Tween finishes
3.2. Precise Control with Position Parameters
The third argument of a Tween in a Timeline, the position parameter, allows you to specify exactly when the Tween should start.
>: Starts immediately after the previous Tween ends. (Default)<: Starts simultaneously with the previous Tween. (Overlap)+=1: Starts 1 second after the previous Tween ends. (Delay)-=0.5: Starts 0.5 seconds before the previous Tween ends. (Overlap)"labelName": Starts at a specific label point in the Timeline.