- const COUNT = 10
- let b = 0
while b < COUNT
  .box= b + 1
  - b++

*
  box-sizing border-box
  
body
  display grid
  place-items center
  min-height 100vh
  background hsl(0, 0%, 10%)
  
.box
  position absolute
  top 50%
  left 50%
  height 25vmin
  width 25vmin
  display grid
  place-items center
  font-size 5vmin
  font-family sans-serif
  transform translate(-50%, -50%)
  
  &:nth-of-type(odd)
    background hsl(90, 80%, 70%)
  
  &:nth-of-type(even)
    background hsl(90, 80%, 40%)

import gsap from 'https://cdn.skypack.dev/gsap'

const STAGGER = 0.5
const DURATION = 1
const OFFSET = 5 * STAGGER
const BOXES = gsap.utils.toArray('.box')

const LOOP = gsap.timeline({
  paused: true,
  repeat: -1,
})

const SHIFTS = [...BOXES, ...BOXES, ...BOXES]

SHIFTS.forEach((BOX, index) => {
  const BOX_TL = gsap
    .timeline()
    .fromTo(
      BOX,
      {
        xPercent: 100,
      },
      {
        xPercent: -200,
        duration: 1,
        ease: 'none',
        immediatRender: false,
      }, 0
    )
    .fromTo(
      BOX,
      {
        scale: 0,
      },
      {
        scale: 1,
        repeat: 1,
        zIndex: BOXES.length,
        yoyo: true,
        ease: 'none',
        duration: 0.5,
        immediateRender: false,
      },
      0
    )
  LOOP.add(BOX_TL, index * STAGGER)
})

const CYCLE_DURATION = STAGGER * BOXES.length
const START_TIME = CYCLE_DURATION + (DURATION * 0.5) + OFFSET
const END_TIME = START_TIME + CYCLE_DURATION
gsap.fromTo(LOOP, {
  totalTime: START_TIME,
},
{
  totalTime: END_TIME,
  duration: 10,
  ease: 'none',
  repeat: -1,
})