JSFiddle - React, Tailwind, and code Playground
HTML
<h2>
Title
</h2>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
CSS
body {
background: #202731;
color: #FFF;
font-family: sans-serif;
}
h2,
li {
display: none;
}
JavaScript
var title = $("h2"),
listItems = $("ul li");
function wait(delay) {
return new Promise(function(resolve) {
setTimeout(resolve, delay);
});
}
var s = performance.now()
async function reveal() {
console.log('reveal delay ', performance.now() - s)
for (var i = 0; i < listItems.length; i++) {
$(listItems[i]).fadeTo(2000, 1);
await wait(250);
}
}
title.fadeTo(1000, 1)
.promise().then(reveal)