JSFiddle - React, Tailwind, and code Playground

by amsardesai

HTML

<body>
<ul id="menuItems">
<li>head</li>
<li>lol 1</li>
<li>lmao 2</li>
<li>sup 3</li>
<li>lolol 4</li>
</ul>
</body>

CSS

.animationReset {
    position:relative;
    top: -100px;
    opacity:0;
}

#menuItems {
    width: 400px;
    border: 1px solid;
    margin-left:auto;
    margin-right:auto;

}

#menuItems li {
    width: 180px;
    height: 60px;
    margin: 40px;
    line-height: 60px;
    border: 1px solid;
    text-align:center;
    background-color: #ffd;
    font-family: Verdana;
    margin-left:auto;
    margin-right:auto;
}

#menuItems li:first-child {
    width: 200px;
    height: 80px;
    line-height: 80px;
}

JavaScript

(function($){
 var _e = document.createElement("canvas").width
 $.fn.cssrotate = function(d) {  
    return this.css({
  '-moz-transform':'rotate('+d+'deg)',
  '-webkit-transform':'rotate('+d+'deg)',
  '-o-transform':'rotate('+d+'deg)',
  '-ms-transform':'rotate('+d+'deg)'
 }).prop("rotate", _e ? d : null)
 }; 
 var $_fx_step_default = $.fx.step._default;
 $.fx.step._default = function (fx) {
 if(fx.prop != "rotate")return $_fx_step_default(fx);
 if(typeof fx.elem.rotate == "undefined")fx.start = fx.elem.rotate = 0;
 $(fx.elem).cssrotate(fx.now)
 }; 
})(jQuery);














$(document).ready(function() {
    
    var perItemDelay = 200;
    var animationDuration = 500;
    var minAngle = -5;
    var maxAngle = 5;
    
    $("#menuItems li").addClass("animationReset");

    $("#menuItems li").each(function(index) {
        
        var delay = index * perItemDelay;
        var angle = (Math.random() * (maxAngle - minAngle)) + minAngle;
        $(this).delay(delay).animate({
            opacity: 1,
            top: '+=100px',
            rotate: angle
        }, animationDuration); //
    });



});



/*







    $("#menuItems li:not(:first-child)").addClass("slidingReset");
    $("#menuItems li").addClass("fadingReset");

    $("#menuItems li:first-child").animate({
        opacity: 1
    }, 100, 'linear', function() {
        $("#menuItems li:not(:first-child)").each(function(index) {
            var delay = index * 100;
            $(this).delay(delay).animate({
                opacity: 1,
                top: '+=100px'
            }, 200);
        });
    });





*/