JSFiddle - React, Tailwind, and code Playground

by akmiecik

HTML

<div id="menu_1">
  <ul class="horizontal-menu">
    <li class="li_1"><a href="#hedge">Asphalt Financial Hedge</a></li>
    <li class="li_2"><a href="#models">Business Models</a></li>
    <li class="li_3"><a href="#services">Services</a></li>
    <li class="li_4"><a href="#the_app">The Asphalt App</a></li>
  </ul>
</div>

CSS

li {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

li.active {
  opacity: 1;
}

JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const menu = document.getElementById('menu_1');
  const menuItems = menu.querySelectorAll('li');

  menuItems.forEach((item, index) => {
    setTimeout(() => {
      item.classList.add('active');
    }, index * 750); // 750 milliseconds = 0.75 seconds
  });
});