JSFiddle - React, Tailwind, and code Playground

by Darren Galway

HTML

<div class="grid">
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
</div>

SCSS

$total: 12;
$columns: 3;
$speed: 3000ms;

body {
  display: flex;
  height: 100vh;
  width: 100vw;
  align-items: center;
  justify-content: center;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1rem;
  background: blue;
  padding: 1rem;
  
   &__item {
     width: 100px;
     height: 100px;
     background: red;
     border-radius: 4px;
     animation: animateBox ease infinite forwards;
     transform-origin: top left;
     opacity: 0;
   }
}

@keyframes animateBox {
  0% {
    transform: scale(0.7);
    opacity: 0;
  }
  
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

JavaScript

const columns = 3;
const speed = 1200;
const elements = document.querySelectorAll('.grid__item');

elements.forEach((item, index) => {
  const d = index * speed / (elements.length * 2);
	const delay = Math.floor(index / columns) + index % columns;
  
  
  
  item.style.animationDelay = `${d}ms`;
  item.style.animationDuration = `${speed}ms`;
})