Position Parameters

Position parameters control WHEN animations start.

This is one of the most important Timeline concepts.

Default

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

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

Result:

Box1 ---->
Box2         ---->

Sequential.

Absolute Time

tl.to(".box1", {
  x: 200
}, 2);

Starts at 2 seconds.

Relative Position "+=1"

tl.to(".box2", {
  x: 200
}, "+=1");

Starts 1 second after previous animation ends.

Timeline:

Box1 ---->
          (1s gap)
Box2               ---->

Relative Position "-=0.5"

tl.to(".box2", {
  x: 200
}, "-=0.5");

Starts 0.5s before previous animation ends.

Timeline:

Box1 -------->
        Box2 -------->

Overlap created.

Start Together

tl.to(".box1", {
  x: 200
})
.to(".box2", {
  y: 200
}, "<");

"<" means start at same time as previous animation.

Timeline:

Box1 -------->
Box2 -------->

Both together.

Start After Previous Starts

tl.to(".box1", {
  x: 200
})
.to(".box2", {
  y: 200
}, "<0.5");

Starts 0.5 seconds after previous starts.

End Together

tl.to(".box1", {
  duration: 2
})
.to(".box2", {
  duration: 1
}, ">");

">" means start after previous animation ends.