Labels

Labels are named positions inside a timeline.

Instead of using time values, you can use meaningful names.

Adding Labels

tl.addLabel("start");

or

tl.addLabel("intro", 2);

Example

const tl = gsap.timeline();

tl.addLabel("begin")

.to(".box1", {
  x: 200,
  duration: 1
})

.addLabel("middle")

.to(".box2", {
  x: 200,
  duration: 1
})

.addLabel("end");

Timeline:

begin ---- box1 ---- middle ---- box2 ---- end