<div class="inner">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

.inner {
  padding: 50px;
  gap: 50px;
  display: grid;
  grid-auto-flow: column;
  justify-content: center;

  .box {
    width: 200px;
    height: 300px;
    background-color: seagreen;
  }
}

const boxes = document.querySelectorAll('.box');
const timeline = gsap.timeline();

boxes.forEach((element, index) => {
  timeline.fromTo(element, {
    opacity: 0,
    y: index % 2 === 0 ? -50 : 50
  }, {
    opacity: 1,
    y: 0,
    duration: 0.35,
    delay: index === 0 ? 0 : -0.15
  });
});

window.addEventListener('click', () => {
  timeline.pause();
  timeline.progress(0);
  timeline.play();
});