<div class="control">
  <div class="box red" id="box1">1</div>
  <div class="box green" id="box2">2</div>
  <div class="box blue" id="box3">3</div>
  <div class="box orange" id="box4">4</div>
  <div class="box purple" id="box5">5</div>
</div>
html {
  font-size: 20px;
}

body {
  font-family: "proxima-nova", sans-serif;
  padding: 0;
  margin: 0;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  background: #1a1a1a;
}
.control {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5;
}
.box {
  flex: 0 0 60px;
  height: 60px;
  margin: 4px;
  position: relative;
  color: white;
  font-size: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 3px;
  font-weight: 600;
  user-select: none;
  cursor: pointer;
}
.green {
  background-color: #307d40;
}
.red {
  background-color: #991a1a;
}
.blue {
  background-color: #304f7d;
}
.orange {
  background-color: #a06d2a;
}
.purple {
  background-color: #612a73;
}
gsap
  .timeline({ defaults: { duration: 0.35, ease: "sine" } })
  .to("#box2", { y: -100 })
  .to("#box1", { y: 100 })
  .to("#box5", { x: -70, y: 70, opacity: 0.5 })
  .to("#box3", { x: -70 })
  .to("#box4", { duration: 1, rotation: 180, scale: 2, ease: "elastic" });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js