<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;
  margin: 0.5rem;
}
img {
  width: 200px;
}

.box2{
  background: thistle;
}
.box3{
  background: darkblue;
}
.box4{
  background: deepskyblue;
}
.box5{
  background: lightcoral;
}
.box6{
  background: MediumVioletRed;
}

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

//example.
// gsap.to(".box", {
//   x: -10,
// })

// 1. Make one of the divs move left and/or right
// gsap.fromTo(".box1",{
//   x: -200
// },{x:200, yoyo: true, repeat: -1})
// 2. make one of the divs move up and/or down
// gsap.to(".box2", {
//   y:100,
//   yoyo: true,
//   repeat: 3
// })
// 3. make one of the divs scale up or down
// gsap.to(".box3", {
//   transformOrigin:"top left",
//   scale: 0,
// })
// 4. make one of the divs fade in and out
// gsap.to(".box4", {
//   duration: 4,
//   opacity: 0
// })
// 5. Try out GreenSock's stagger property to make all of the divs animate.

// 🛑 uncomment out code to see the staggers in action

// // example with staggers
// gsap.to(".box", {
//   x: -20,
//    stagger: {
//     amount: 0.5, //  the total amount of time (in seconds) that gets split up among all the staggers.
//     from: "center", // the position in the array from which the stagger will emanate
//    yoyo: true,
//   repeat: -1,
//   },

// })

// another example

// gsap.to(".box", {
//   y: -100,
//    stagger: {
//     amount: 1, //  the total amount of time (in seconds) that gets split up among all the staggers.
//     from: "center", // the position in the array from which the stagger will emanate
//        yoyo: true,
//   repeat: -1,
//   },

// })