gsap-timeline

Create a timeline with gsap.timeline() and add tweens with .to(); they play one after another by default. Use the position parameter as the third argument to overlap or offset tweens, such as "+=0.5" or "<".

The position parameter controls where a tween is placed in the timeline. It accepts absolute times like 1, relative offsets like "+=0.5" or "-=0.2", label names, and placement shortcuts "<" (start with previous) and ">" (after previous).

Yes, timelines can contain other timelines using master.add(child, position). This lets you build modular animation sections and compose them into a master timeline, but nested animations must not contain ScrollTriggers.

Use labels added with addLabel() and call tl.play("labelName") to start from that point, or tl.tweenFromTo("intro", "outro") to animate the playhead between two labels. You can also seek with tl.time(2) or tl.progress(0.5).

Use a timeline instead of chaining delays. Timelines with the position parameter give precise, maintainable sequencing, while chained delay values break easily when any single animation duration changes.

Put ScrollTrigger on the timeline itself or on a top-level tween, never on tweens nested inside a timeline. ScrollTriggers inside nested animations cause conflicting control over playback.