.wrap {
  position: relative;
  height: 100vh;
}

.box {
  display: block;
  width: 100px;
  height: 100px;
}

.green {
  background-color: green;
}
.orange {
  background-color: orange;
}
.yellow {
  background-color: yellow;
}

var tl = gsap.timeline();
//sequenced one-after-the-other

tl.to('.green', { duration: 2, x: 200 })
  .to('.green', { duration: 2, y: 200 })
    .to('.orange', { duration: 1, x: 200 }, 4)
    .to('.yellow', { duration: 3, rotation: 360, x: 200, y: 100 }, 5);