Timeline concepts.
Sequencing tweens together with the GSAP timeline API - the heart of every multi-step animation.
Pick an underlined value to change it
const tl = gsap.timeline({defaults: { duration: },});tl.to(".a", { x: 196 }).to(".b", { x: 196 }).to(".c", { x: 196 });
- gsap.timeline()gsap.timeline() creates a sequenced container for multiple tweens.
- keyframeskeyframes is a GSAP tween property that runs several sequential steps inside a single tween, so you can choreograph multi-stage motion without building a full timeline.
- Nested timelinesNested timelines are GSAP timelines added inside another timeline as a single, self-contained unit, so a whole sub-sequence can be positioned, delayed, sped up, or reversed as one object.
- Position parameterThe position parameter is the second-to-last argument on any timeline .to() / .from() / .set() call.
- repeat & repeatDelayrepeat and repeatDelay are GSAP special properties that loop a tween or timeline a set number of times, with an optional gap between each pass.
- Seamless loopA seamless loop is a GSAP animation set to repeat: -1 whose end state matches its start state exactly, so it plays forever with no visible jump at the loop point.
- staggerStagger is a GSAP property that offsets the start time of each target in a tween, animating them one after another instead of all at once.
- Timeline controlsTimeline controls are the methods GSAP exposes on a timeline instance to drive its playhead after it's built: play(), pause(), reverse(), restart(), seek(), progress(), time(), and timeScale().
- Timeline labelsTimeline labels are named time positions you attach to a GSAP timeline with addLabel(), then reference by name to place tweens, seek the playhead, or start playback.
- timeScaletimeScale is a GSAP method that changes the playback rate of a tween or timeline while it is running: timeScale(2) plays it at double speed, timeScale(0.5) at half speed, and timeScale(1) is normal.
- yoyoyoyo is a GSAP repeat modifier that makes each odd repeat play in reverse.