javascript - GSAP - How can I distribute circle shape around the page?

Question

I have 4 circles which I need to distribute in 4 directions. If I allow position absolute, it's all mixed-up together but I need every circle side by side in the center of the page.

The problem is Gsap is a distribute circle with the transform or with the position but when if I enable position absolute then the circle is mixed up.

Is there any other way I can achieve this?

HTML

<div class="bg">
  <div class="center-area">
    <div class="shape"></div>
    <div class="shape"></div>
    <div class="shape"></div>
    <div class="shape"></div>
  </div>
</div>

CSS

.bg {
  background: #1d1d1d;
  width: 100%;
  height: 100vh;
}
.shape {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background: red;
  display: inline-block;
/*   position: relative; */
}
.shape + .shape {
  margin-left: 10px;
}
.center-area {
/*   position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.shape:nth-child(1) {
/*   position: absolute; */
}

GSAP

const timeline = gsap.timeline({ })
.to('.shape:nth-child(1)', {
  duration: 0.5,
  left: '0'
})

Answer 1

等待大神答复