gsap-timeline

Create a timeline with gsap.timeline() and chain .to() calls; tweens are appended one after another by default. Use the position parameter as the third argument to control exact placement, such as "+=0.5" for a gap or "<" to start with the previous tween.

The position parameter is the third argument of timeline methods that controls when a tween starts. It accepts absolute times like 1, relative offsets like "+=0.5" or "-=0.2", label names, and placement shortcuts like "<" (start with previous) or ">" (after previous ends).

Yes, timelines can contain other timelines. Create a child timeline, add tweens to it, then insert it into a master timeline with master.add(child, position). This keeps complex animations modular and reusable.

Prefer a timeline over chained delays for multi-step animations. Timelines with the position parameter and labels are more readable, easier to maintain, and give you playback controls like play, reverse, restart, and seek that delays cannot provide.

Put ScrollTrigger on the timeline or top-level tween, never on tweens nested inside a timeline. Nested ScrollTriggers conflict with the timeline's own playhead control and cause incorrect scroll-driven behavior.