JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<div class="stage">
  <div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div><div class="line"></div>
<div class="line"></div> 
</div>

CSS

.line {
    width:200px;
    height:1px;
    background: black;
    position:relative;
    top:-500px;
    opacity:0;
}
.stage {
    padding:150px;

    
}

JavaScript

$('.line').each(function(){
    var min = -20;
var max = 20;
        var min2 = 400;
var max2 = 1100;
// and the formula is:
var random = Math.floor(Math.random() * (max - min + 1)) + min;
    var random2 = Math.floor(Math.random() * (max2 - min2 + 1)) + min2;
    
    var cssLine = "transform:rotate(" + random + "deg);-ms-transform:rotate(" + random + "deg);-webkit-transform:rotate(" + random + "deg)";
    $(this).prop("style",cssLine)
    $(this).animate({top:"0", "opacity":"1"}, random2,'easeOutElastic');




})