gsap-timeline

# GSAP Timeline ## When to Use This Skill Apply when building multi-step animations, coordinating several tweens in sequence or parallel, or when the user asks about timelines, sequencing, or keyframe-style animation in GSAP. **Related skills:** For single tweens and eases use **gsap-core**; for scroll-driven timelines use **gsap-scrolltrigger**; for React use **gsap-react**. ## Creating a Timeline ```javascript const tl = gsap.timeline(); tl.to(".a", { x: 100, duration: 1 }) .to(".b", { y: 50, duration: 0.5 }) .to(".c", { opacity: 0, duration: 0.3 }); ``` By default, tweens are **appended** one after another. Use the **position parameter** to place tweens at specific times or relative to other tweens. ## Position Parameter Third argument (or position property in vars) controls placement: - **Absolute**: `1` — start at 1 second. - **Relative (default)**: `"+=0.5"` — 0.5s after end; `"-=0.2"` — 0.2s before end. - **Label**: `"labelName"` — at that label; `"labelName+=0.3"` — 0.3s after label. - **Placement**: `"<"` — start when recently-added animation starts; `">"` — start when recently-added animation ends (default); `"<0.2"` — 0.2s after recently-added animation start. Examples: ```javascript tl.to(".a", { x: 100 }, 0); // at 0 tl.to(".b", { y: 50 }, "+=0.5"); // 0.5s after last end tl.to(".c", { opacity: 0 }, "<"); // same start as previous tl.to(".d", { scale: 2 }, "<0.2"); // 0.2s after previous start ``` ## Timeline Defaults Pass d...