body {
  background: #000000;
  height: 100vh;
}

h1 {
  color: #ffffff;
}

.square_block {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.square {
  background: #ffffff;
  width: 50px;
  height: 50px;
}

gsap.set(".square", { opacity: 0, x: 100 })

const tl = gsap.timeline({ repeat: -1, repeatDelay: 1 });

tl.to(".num1", {
  opacity: 1, x: 0
}).to(".num2", {
  opacity: 1, x: 0
}).to(".num3", {
  opacity: 1, x: 0
}).to(".num4", {
  opacity: 1, x: 0
}).to(".num5", {
  opacity: 1, x: 0
}).to(".num1", {
  opacity: 0, x: -100
}).to(".num2", {
  opacity: 0, x: -100
}).to(".num3", {
  opacity: 0, x: -100
}).to(".num4", {
  opacity: 0, x: -100
}).to(".num5", {
  opacity: 0, x: -100
})