<div class="block empty-block">
  scroll to trigger animation
</div>
<div class="block animation-container">
  <h1 class="line-1">I build things that look good and actually work.</h1>
  <p class="line-2">Less guesswork. More user love.</p>
</div>

body {
  font-family: Avenir, sans-serif;
  background-color: #0e100f;
  color: #fffce1;
}

.block {
  height: 100vh;
  width: 100%;
}

.empty-block {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  flex-direction: column;
  background-color: #0e1222;
}

.animation-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  flex-direction: column;
}

p {
  max-width: 70ch;
  font-size: 1.4rem;
  text-align: center;
  line-height: 1.3;
}

function splitText(text) {
  return text
    .split("")
    .map((char) => `<span class="text-animation">${char}</span>`)
    .join("");
}

gsap.registerPlugin(ScrollTrigger);

document.addEventListener("DOMContentLoaded", () => {
  const line1 = document.querySelector(".line-1");
  const line2 = document.querySelector(".line-2");

  line1.innerHTML = splitText(line1.innerText);
  line2.innerHTML = splitText(line2.innerText);

  gsap.from(".text-animation", {
    scrollTrigger: {
      trigger: ".animation-container",
      start: "top center",
      end: "bottom bottom",
      scrub: 1,
      toggleActions: "restart none none reverse"
    },
    opacity: 0,
    duration: 0.00001,
    stagger: 0.000001
  });
});