<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<div class="box box1"></div>
<div class=" box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
<div class="box box5"></div>

.box {
  width: 150px;
  height: 150px;
  border: 2px solid rebeccapurple;
  margin: 1px;
}

.box1 {
  background: #142850;
}
.box2 {
  background: #ff5151;
}
.box3 {
  background: #706c61;
}
.box4 {
  background: #347474;
}
.box5 {
  background: #4d4646;
}

boxOne = document.querySelector('.box1');
boxTwo = document.querySelector('.box2');
boxThree = document.querySelector('.box3');
boxFour = document.querySelector('.box4');
boxFive = document.querySelector('.box5');

TweenMax.to(boxOne, 16, {x:200});
TweenMax.to(boxTwo, 16, {y:200});
TweenMax.to(boxFour, 16, {opacity: 0.3});

const tl = new TimelineMax({});
tl.to(boxFive, 16, {x:200});
tl.to(boxFive, 6,{y:-600});
tl.to(boxFive, 6, {x: -200});
tl.to(boxFive, 2,{x:200});
tl.to(boxFive, 6, {y:-200});
tl.to(boxOne, 6, {y:100});