gsap-timeline

1# GSAP Timeline
2 
3## When to Use This Skill
4 
5Apply 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.
6 
7**Related skills:** For single tweens and eases use **gsap-core**; for scroll-driven timelines use **gsap-scrolltrigger**; for React use **gsap-react**.
8 
9## Creating a Timeline
10 
11```javascript
12const tl = gsap.timeline();
13tl.to(".a", { x: 100, duration: 1 })
14  .to(".b", { y: 50, duration: 0.5 })
15  .to(".c", { opacity: 0, duration: 0.3 });
16```
17 
18By default, tweens are **appended** one after another. Use the **position parameter** to place tweens at specific times or relative to other tweens.
19 
20## Position Parameter
21 
22Third argument (or position property in vars) controls placement:
23 
24- **Absolute**: `1` — start at 1 second.
25- **Relative (default)**: `"+=0.5"` — 0.5s after end; `"-=0.2"` — 0.2s before end.
26- **Label**: `"labelName"` — at that label; `"labelName+=0.3"` — 0.3s after label.
27- **Placement**: `"<"` — start when recently-added animation starts; `">"` — start when recently-added animation ends (default); `"<0.2"` — 0.2s after recently-added animation start.
28 
29Examples:
30 
31```javascript
32tl.to(".a", { x: 100 }, 0);           // at 0
33tl.to(".b", { y: 50 }, "+=0.5");      // 0.5s after last end
34tl.to(".c", { opacity: 0 }, "<");     // same start as previous
35tl.to(".d", { scale: 2 }, "<0.2");    // 0.2s after previous start
36```
37 
38## Timeline Defaults
39…