gsap-timeline

SKILL.md

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.