Timelines

Timelines are one of GSAP's most powerful features. Instead of managing multiple animations separately, you can organize them into a sequence.

Why Use Timelines?

Without Timeline:

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

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

gsap.to(".box3", {
  x: 200,
  duration: 1,
  delay: 2
});

Problems:

• Too many delays
• Hard to maintain
• Difficult to synchronize

With Timeline:

const tl = gsap.timeline();

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

Cleaner and easier to control.