<div class="container">
  <div class="blinking-wrapper">
    Accenture,
    Amazon
    Apple,
    Astrazeneca,
    Citigroup,
    <span data-number="1">Coca-Cola Co</span>,
    China Merchants Bank,
    Disney
    Google,
    IBM,
    <span data-number="2">Intel</span>,
    JPMorgan Chase,
    Mastercard,
    McDonalds,
    Meta,
    NASA,
    <span data-number="4">Nestle SA</span>,
    Netflix,
    Nike,
    <span data-number="5">Nintendo</span>,
    Novartis AG,
    Nvidia,
    Oracle,
    Paypal Holdings,
    <span data-number="3">PepsiCo</span>,
    Pfizer,
    Philip Morris,
    <span data-number="7">Royal Bank of Canada</span>,
    SAP SE,
    Samsung,
    <span data-number="6">Siemens AG</span>,
    Sony Group,
    SpaceX,
    Spotify,
    <span data-number="8">Starbucks</span>,
    Tesla,
    Toyota Motor,
    Visa.
  </div>
</div>
<footer class="page-footer">
  <span>made by </span>
  <a href="https://georgemartsoukos.com/" target="_blank">
    <img width="24" height="24" src="https://assets.codepen.io/162656/george-martsoukos-small-logo.svg" alt="George Martsoukos logo">
  </a>
</footer>

@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,700;1,700&display=swap");

:root {
  --black: #1a1a1a;
  --white: #fff;
  --blue: #22577a;
  --green: #80ed99;
  --yellow: #ebe717;
}

body {
  font-family: "Montserrat", sans-serif;
  margin: 50px 0;
  color: var(--white);
  background: var(--black);
}

.container {
  max-width: 1600px;
  padding: 0 15px;
  margin: 0 auto;
}

.blinking-wrapper {
  font-size: 50px;
}

.blinking-wrapper.blinking [data-number] {
  animation: changeColor 1.5s var(--delay, 0s);
}

@keyframes changeColor {
  to {
    color: var(--green);
  }
}

@media (max-width: 600px) {
  .blinking-wrapper {
    font-size: 25px;
  }
}

/* FOOTER STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.page-footer {
  position: fixed;
  right: 0;
  bottom: 50px;
  display: flex;
  align-items: center;
  padding: 5px;
  z-index: 1;
  font-size: 16px;
  color: var(--black);
  background: var(--white);
}

.page-footer a {
  display: flex;
  margin-left: 4px;
}

const blinkingWrapper = document.querySelector(".blinking-wrapper");
const animatedEls = blinkingWrapper.querySelectorAll("[data-number]");
const TOGGLE_CLASS = "blinking";
const BASE_DELAY = 1.5;

window.addEventListener("load", function () {
  blinkingWrapper.classList.add(TOGGLE_CLASS);
  animatedEls.forEach(function (el, index) {
    if (index != 0) {
      const delay = BASE_DELAY * el.dataset.number - BASE_DELAY;
      el.style.setProperty("--delay", `${delay}s`);
    }
  });
});

/*FIRST METHOD WITH REFLOW*/
blinkingWrapper
  .querySelector(`[data-number="${getMaxNumber()}"]`)
  .addEventListener("animationend", function () {
    blinkingWrapper.classList.remove(TOGGLE_CLASS);
    void blinkingWrapper.offsetHeight;
    blinkingWrapper.classList.add(TOGGLE_CLASS);
  });

/*SECOND METHOD WITH TIMEOUT*/
/*blinkingWrapper
  .querySelector(`[data-number="${getMaxNumber()}"]`)
  .addEventListener("animationend", function () {
    blinkingWrapper.classList.remove(TOGGLE_CLASS);
    setTimeout(function () {
      blinkingWrapper.classList.add(TOGGLE_CLASS);
    }, 0);
  });*/

function getMaxNumber() {
  const numbers = Array.from(animatedEls).map(function (el) {
    return el.dataset.number;
  });
  return Math.max(...numbers);
}