JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
    <ul>
        <li class="red"></li>
        <li class="blue"></li>
        <li class="yellow"></li>
        <li class="green"></li>
        <li class="orange"></li>
    </ul>
</div>
<a href="#">move</a>

CSS

.box{
    width: 600px;
    height: 150px;
    overflow: hidden;
    border: 1px solid #000;
}

li{
    display: block;
    height: 50px;
    width: 50px;
    margin: 10px;
    float: left;
    border: 1px solid #cecece;
    position: absolute;
}

.blue{
    background-color: blue;
}

.green{
    background-color: green;
}

.red{
    background-color: red;
}

.yellow{
    background-color: yellow;
}

.green{
    background-color: green;
}

.orange{
    background-color: orange;
}

JavaScript

var lis = document.getElements('li'),
    link = document.getElement('a'),
    shown = true,
    off = {
        left: -50
    },
    delay = 0,
    ani = function(){
        lis.each(function(li){
            delay = delay + 100;
            var ori = li.retrieve('original'),
                new_left = shown ? off.left - ori : ori;
            
            li.tween.delay(delay, li, ['left', new_left]);
        });
        
        shown = !shown;
        delay = 0;
    };

link.addEvent('click', function(e){
    e.stop();
    ani();
});

lis.each(function(li, i){
    li.setStyle('left', i * 60)
        .store('original', i * 60)
        .set('tween', {
            duration: 1000, 
            transition: Fx.Transitions.Elastic.easeOut
        });
});