Concepts category

Timeline concepts.

Sequencing tweens together with the GSAP timeline API - the heart of every multi-step animation.

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.