JSFiddle - React, Tailwind, and code Playground

by Nikita Titorovich

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <ul>
    <li data-visible="hidden" class="item">Тест</li>
    <li data-visible="hidden" class="item">Тест</li>
    <li data-visible="hidden" class="item">Тест</li>
    <li data-visible="hidden" class="item">Тест</li>
    <li data-visible="hidden" class="item">Тест</li>
  </ul>  
</body>
</html>

SCSS

.item {
  padding: 10px 20px;
  background-color: #fbfbfb;
  opacity: 0;
  transition: .5s ease;
  transform: translateY(10px);
  & + & {
    margin-top: 10px;
  }
  &.active {
    transform: translateY(0);
    opacity: 1;
  }
}

JavaScript

const queue = document.querySelectorAll('[data-visible="hidden"]');

function showElements(queue) {

	let interval = 0;
  
  for (let i = 0; i < queue.length; i++) {
  	
    setTimeout(() => {
      queue[i].classList.add("active");
    }, interval);
    
    interval += 250;
   
  }
  
  
}

showElements(queue);

console.log(queue);