<section>
<div class= "container">
<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>
<div class="box box6"></div>
<div class="box box7"></div>
</div>
</section>

body {
  display: flex;
  justify-content: space-evenly;
  margin-top: 200px;
}
.container {
  margin: 1rem;
}
.box {
  width: 50px;
  height: 50px;
  background: #44bba4;
  display: inline-block;
}
img {
  width: 200px;
}

// greensock is already added as a dependency you can get started with the goals here.

//example.
// 1. Make one of the divs move left and right: x axis
// gsap.fromTo(".box1", {
//   x: 100,
// },{x:-100,  yoyo: true,
//   repeat: 3})

// 2. make on of the divs move up and down
gsap.set(".box2", {
  opacity: 0
})
gsap.to(".box2", {
  opacity: 1,
  duration: 2,
  y: 200,
  yoyo: true,
  repeat: 2
})
// 3. make one of the divs scale up or down
gsap.to(".box3", {
  scale: 0.5,
  transformOrigin:"0 right",
  paused: true
})
// 4. make one of the dives fade in and out

// 5. Try out GreenSock's stagger property to make all of the divs animate.