Chapter 403: The Position Parameter

Core Idea

The secret to building gorgeous sequences with precise timing is understanding the position parameter which is used in many methods throughout GSAP. This one super-flexible parameter controls the placement of your tweens, labels, callbacks, pauses, and even nested timelines, so you'll be able to literally place anything anywhere in any sequence.

Key Concepts

• Absolute time (in seconds) measured from the start of the timeline, as a number like 3
• Label, like "someLabel". If the label doesn't exist, it'll be added to the end of the timeline.
• "<" The start of previous animation**. Think of < as a pointer back to the start of the previous animation.
• ">" - The end of the previous animation**. Think of > as a pointer to the end of the previous animation.
• A complex string where "+=" and "-=" prefixes indicate relative values. When a number follows "<" or ">", it is interpreted as relative so "<2" is the same as "<+=2". Examples:
• "+=1" - 1 second past the end of the timeline (creates a gap)
• "-=1" - 1 second before the end of the timeline (overlaps)
• "myLabel+=2" - 2 seconds past the label "myLabel"

Code Examples

.to( target, vars, **position** )

• What it demonstrates: typical usage of The Position Parameter in a GSAP animation.

Key Takeaways

1. Absolute time (in seconds) measured from the start of the timeline, as a number like 3
2. Label, like "someLabel".
3. "<" The start of previous animation**.
4. ">" - The end of the previous animation**.
5. A complex string where "+=" and "-=" prefixes indicate relative values.

Connects To

• gsap.to(): see ch033 — gsap.to()
• from(): see ch014 — gsap.from()
• fromTo(): see ch015 — gsap.fromTo()
• add(): see ch038 — add
• total duration: see ch127 — totalDuration