JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main_box">
    <div class="box">
    </div>
    <div class="box">
    </div>
    <div class="box">
    </div>
</div>

CSS

.box {
    background: #6699FF;
    height: 100px;
    width: 100px;
    position: relative;
    margin-left: 920px;
    opacity: 0.0;
}
#main_box{
    overflow: hidden;
    padding: 5px;
    border: 3px solid;
}

JavaScript

jQuery.fn.staggeredAnimate = function(func, delay) {
  if(delay == undefined) delay = 500;
  return this.each(function(i){
    $(this).animate({dummy: 1}, delay * i, func);
  });
}
      
$(document).ready(function(){
  $(".box").staggeredAnimate(function(){
    $(this).animate({left: "-=920px", opacity: "1"}, 1250)
  })
  return false;
});