Timelines

Sequencing, defaults, labels, relative position, stagger, repeat/yoyo, control methods, and nesting.

A gsap.timeline() is the backbone of any multi-step animation. It sequences tweens on a shared playhead, so you edit timing in one place instead of hand-tuning a pile of delay values that drift out of sync the moment you change one.

Shared Constants

Define timing once and reuse it across every tween so the whole sequence feels like one system.

const DURATION = 0.6
const EASE = 'power3.out'
const STAGGER = 0.08

Build with defaults, One Tween per Line

Pass defaults to the timeline so shared properties aren't repeated on every tween. Chain one tween per line — the sequence reads top to bottom.