Staggered Glow In Text

index.html

<div class="article">
  <h1 class="glowIn">
    The World this Week
  </h1>
  <p class="glowIn">
    A winter storm that covered three-quarters of America’s Lower 48 with snow brought havoc to southern states. A federal emergency was declared in Texas; temperatures plummeted to -2℉ (-19℃) in Dallas. Millions of Texans were left without power, as were tens of thousands of people in other states. Many blamed antiquated energy grids for not being able to cope with the surge in demand for electricity.
  </p>
</div>

script.js

let glowInTexts = document.querySelectorAll(".glowIn");

// split all text content into letters
// for each letter, wrap it with a span
// then let each span executes animation in sequence.
glowInTexts.forEach(glowInText => {
  let letters = glowInText.textContent.split("");
  glowInText.textContent = "";
  letters.forEach((letter, i) => {
    let span = document.createElement("span");
    span.textContent = letter;
    span.style.animationDelay = `${i * 0.02}s`;
    glowInText.append(span);
  });
});

staggered-glow-in-text.markdown

Staggered Glow In Text

A Pen by zhang xuan on CodePen.

License.

style.scss

@import url("https://fonts.googleapis.com/css2?family=Lora&display=swap");

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  background: #222;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(
    rgba(16, 16, 16, 0.8),
    rgba(16, 16, 16, 0.8)
  ), url(https://picsum.photos/800/800);
  background-size: cover;
}

.article {
  width: 80vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
  h1, p {
    line-height: 1.8;
    font-family: "Lora", serif;
  }
  
  .glowIn {
    color: white;
    
    span {
      animation: glow-in .5s both;
    }
  }
}

@keyframes glow-in {
  from { opacity: 0; }
  65% {
    opacity: 1;
    text-shadow: 0 0 20px white;
  }
  75% {
    opacity: 1;
  }
  to { opacity: 0.7; }
}