gsap-timeline

Sequence and choreograph multi-step animations with precise timing control and nested timelines.

- Position parameter places tweens at absolute times, relative offsets, labels, or relative to other animations using +=, -=, <, >, and label syntax

- Timeline defaults inherit duration, ease, and other properties to all child tweens, reducing repetition across sequences

- Labels provide readable waypoints for complex animations; seek to labels or use them as position anchors for new tweens

- Nested timelines allow composition of reusable animation sequences into master timelines for modular choreography

- Playback control includes play, pause, reverse, restart, seek by time or progress, and kill with optional child cleanup

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

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.