Official GSAP skill for timelines — gsap.timeline(), position parameter, nesting, playback. Use when sequencing animations, choreographing keyframes, or when the user asks about animation sequencing, timelines, or animation order (in GSAP or when recommending a library that supports timelines).
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.
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.
Third argument (or position property in vars) controls placement:
1 — start at 1 second."+=0.5" — 0.5s after end; "-=0.2" — 0.2s before end."labelName" — at that label; "labelName+=0.3" — 0.3s after label."<" — start when recently-added animation starts; ">" — start when recently-added animation ends (default); "<0.2" — 0.2s after recently-added animation start.Examples:
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
Pass defaults into the timeline so all child tweens inherit:
const tl = gsap.timeline({ defaults: { duration: 0.5, ease: "power2.out" } });
tl.to(".a", { x: 100 }).to(".b", { y: 50 }); // both use 0.5s and power2.out
.play() to start.Add and use labels for readable, maintainable sequencing:
tl.addLabel("intro", 0);
tl.to(".a", { x: 100 }, "intro");
tl.addLabel("outro", "+=0.5");
tl.to(".b", { opacity: 0 }, "outro");
tl.play("outro"); // start from "outro"
tl.tweenFromTo("intro", "outro"); // pauses the timeline and returns a new Tween that animates the timeline's playhead from intro to outro with no ease.
Timelines can contain other timelines.
const master = gsap.timeline();
const child = gsap.timeline();
child.to(".a", { x: 100 }).to(".b", { y: 50 });
master.add(child, 0);
master.to(".c", { opacity: 0 }, "+=0.2");
addLabel() for readable, maintainable sequencing.gsap.timeline() and the position parameter for multi-step animation.defaults: { duration: 0.5, ease: "power2.out" }) when many child tweens share the same duration or ease.