JSFiddle - React, Tailwind, and code Playground

by colintoh

HTML

<div id="box">
<ul>

</ul>
</div>

CSS

#box {
    width:200px;
    height:400px;
    overflow-y:auto;
    overflow-x:hidden;
}

ul{
    -webkit-perspective: 600px;
    -webkit-perspective-origin: 0 0;
    background:black;
}

li{
    background:#aaa;
    height:40px;
    text-align:center;
    position:relative;
    -webkit-transition:all 1000ms cubic-bezier(0.260, 0.860, 0.440, 0.985);;
    -webkit-backface-visibility:hidden;
    -webkit-transform-origin: 50% 50%;
}

ul li:nth-child(odd) {
        background: #fff;
    }

.past{
    opacity:0;
    -webkit-transform:rotateX(-90deg);
}

.future{
    opacity:0;
    -webkit-transform:translateX(-70%);
}

JavaScript

var list = $('ul'),
    lastTop = 0,
    listArr = ['one', 'one', 'one', 'one', 'one', 'one', 'one', 'one', 'one', 'one', 'one', 'one', 'one', 'one', 'one', 'one', 'one', 'one', 'one', 'one', 'one', 'one', 'one', 'one']

    window.requestAnimFrame = (function() {
        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
        function(callback) {
            window.setTimeout(callback, 1000 / 60);
        };
    })();

var time = 0,
    xy = 5;


function update() {
    if (listArr.length) {
        var delay = time + time + time;
        var word = listArr.pop();
        if (listArr.length % 2) {
            var str = "<li class='past'>" + word + "</li>";
        }
        else {
            var str = "<li class='future'>" + word + "</li>";
        }
        
        time += 25;
        setTimeout(function() {
            list.append(str);
            setTimeout(function(ele){ele.removeClass();},200,list.find('li:last-child'));
        }, delay );

    }
};

function animloop() {
    requestAnimFrame(animloop);
    update();
};

animloop();