<p>Stagger duration - <span id="stagger"></span></p>
<p>Text start time - <span id="text"></span></p>
<div id="circles">
</div>
<h1 id="heading">Halfway Through.</h1>
<p id="fixed">Click anywhere to refresh</p>

@import url('https://fonts.googleapis.com/css2?family=Nunito&family=Signika+Negative:wght@400;600&display=swap');

body {
  background-color: #fff;
  color: black;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-family: "Nunito", sans-serif, Arial;
  margin: 1rem;
  min-height: 100vh;
  overflow: hidden;
  z-index: -1;
}

p {
  font-size: 1.2rem;
  line-height: 1.2;
  margin: 0.5rem 0;
}


h1 {
 font-weight: 400;
 font-size: 1.8rem;
 font-family: "Signika Negative", sans-serif, Arial;
}

#circles {
  margin: 3rem 0 1rem 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.circle {
  margin: 6px 0;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
  will-change: transform;
  z-index: 2;
}

#heading {
  visibility: hidden;
  opacity: 0;
}

#fixed {
  position: fixed; 
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

console.clear();

let stagger = document.querySelector("#stagger");
let text = document.querySelector("#text");
let circles = document.getElementById("circles");

let tl = gsap.timeline();

function restart() {
  circles.innerHTML = "";
  tl.clear()
  
  let circleCount = gsap.utils.random(2, 16, 1);

  for (i = 0; i < circleCount; i++) {
    var circle = document.createElement("div");
    circle.classList.add("circle");

    circles.appendChild(circle);
  }
  gsap.set(".circle", {
    text: "💚"
  });
  gsap.set("#heading", {
    autoAlpha: 0,
  });
 

  tl.to(".circle", {
    y: -50,
    ease: "sine.inOut",
    stagger: {
      each: 0.2,
      yoyo: true,
      repeat: 1
    }
  }).to(
    "#heading",
    {
      duration: 0.2,
      autoAlpha: 1
    },
    "<50%"
  );

  tl.getChildren().forEach((tween, i) => {
    if (i === 0) {
      stagger.innerHTML = tween.endTime();
    } else {
      text.innerHTML = tween.startTime();
    }
  });
}
restart()
// click anywhere to restart
document.addEventListener("click", restart);