1. Timeline Basics

A Timeline is a container that holds multiple animations.

Creating a Timeline

const tl = gsap.timeline();

Simple Example

<div class="box red"></div>
<div class="box blue"></div>
<div class="box green"></div>


const tl = gsap.timeline();

tl.to(".red", {
  x: 300,
  duration: 1
})
.to(".blue", {
  x: 300,
  duration: 1
})
.to(".green", {
  x: 300,
  duration: 1
});

Animation Flow

Red   -------->
Blue           -------->
Green                    -------->

Each animation starts after the previous one ends.