JSFiddle - React, Tailwind, and code Playground

by sfoster

HTML

<div id="outer">
  <div class="tab">
    1: XXX
  </div>
  <div class="tab">
    2: XXX
  </div>
  <div class="tab">
    3: XXX
  </div>
</div>
<button style="position:absolute;right: 1em" onclick="fallAnimation()">
Trigger
</button>

CSS

#outer {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100px;
  outline: solid 3px grey;
}

.tab {
  width: 100px;
  height: 30px;
  outline: 1px solid green;
}
.roaring .tab {
  transform: translateY(0);
  /*transition: transform 1s ease-out;*/
}

JavaScript

function fallAnimation() {
	let container = document.getElementById("outer");
  let containerHeight = container.getBoundingClientRect().height;
  for (let tab of document.querySelectorAll(".tab")) {
  	let itemRect = tab.getBoundingClientRect();
    let offsetY = containerHeight - itemRect.y - itemRect.height;
    let distancePcent = offsetY/containerHeight;
    tab.style.transform = `translateY(${offsetY}px)`;
    let delay = 0.1 + Math.random()/3;
    tab.style.transition = `transform ${distancePcent}s cubic-bezier(.93,.09,.95,.59) ${delay}s`;
    console.log("translate", tab.style.transform);
  }
  requestAnimationFrame(() => {
  	container.classList.add("roaring");
	  requestAnimationFrame(() => {
  		container.classList.add("animate");
  	});
  });
}