JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="item" data-id="1">
    <div class="box">
        <span>1</span>
    </div>
</div>
<div class="item" data-id="2">
    <div class="box">
        <span>2</span>
    </div>
</div>
<div class="item" data-id="3">
    <div class="box">
        <span>3</span>
    </div>
</div>
<div class="item" data-id="4">
    <div class="box">
        <span>4</span>
    </div>
</div>

CSS

.item {
    font-size: 60px;
    text-align: center;
}
.item .box {
    overflow: hidden;
}
.item .box span {
    display: block;
    transform: translateY(100%);
    transition: .5s;
}
.item.active span {
    transform: translateY(0)
}

JavaScript

var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                            window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;

var start = window.mozAnimationStartTime;  // Only supported in FF. Other browsers can use something like Date.now().

var myReq;

function step(timestamp) {
  var progress = timestamp - start;
  d.style.left = Math.min(progress / 10, 200) + 'px';
  if (progress < 2000) {
    myReq = requestAnimationFrame(step);
  }
}
myReq = requestAnimationFrame(step);

cancelAnimationFrame(myReq);