Sync-unsync

function setup() {
  createCanvas(550, 550);
  background(0)
  fill(255)
  noStroke()
}

function draw() {
  //translate(0, height); scale(1, -1)
  let h = 50
  for (let s = 0; s < 2; s ++) {
    background(0, 60);
    for (let i = 0; i < 12; i ++) {
      let t = (frameCount + s/2) / 200 - i * 3 / 12 + 3
      for (let j = 9; j >= 0; j --) {
        t %= 3
        if (j == 0) {
          circle((t * 2 / 3) * (width/2 + 10) - 10, h + h * j, 20)
        } else {
          if (t < 1) {
            circle(t * (width/2 + 10) - 10, h + h * j, 20)
          } else if (t < 2) {
            circle(width/2 - sin(t * 2 * PI) * h / 2, h/2 + h * j + cos(t * 2 * PI) * h/2, 20)
          } else if (t < 3) {
            circle(width/2 + (t-2) * (width/2 + 10), h + h * j, 20)
          }
        }
        let c = 0.5 // -0.1
        let d = 2 // 2.2
        if (t > d + c) {
          t -= 1
        } else if (t > c) {
          t -= 1 * (1 - cos((t-c) / d * PI)) / 2
        }
        t *= 3 / 2
        // t += 0.25
      }
    }
  }
}