JSFiddle - React, Tailwind, and code Playground

by ponyspy

HTML

<script src="http://www.devinrolsen.com/wp-content/themes/dolsen/demos/jquery/zlayer/js/jquery.zlayer.min.js"></script>
<div class="outer">
    <div class="inner">
        <div class="cub">1</div>
        <div class="cub">2</div>
        <div class="cub">3</div>
        <div class="cub">4</div>
        <div class="cub">5</div>
        <div class="cub">6</div>
    </div>        
</div>

CSS

.outer {
    width: 200px;
    height: 200px;
    overflow: hidden;
    outline: 1px solid green;
}

.inner {
    width: 1200px;
    height: 200px;
}

.cub {
    width: 200px;
    height: 200px;
    float: left;
    position: relative;
}

.cub:nth-child(odd) {
   background-color: red;
    z-index: 0;
}

.cub:nth-child(even) {
   background-color: blue;
   z-index: 1;
}

JavaScript

$('.outer').zlayer([
    {
        layer:'.cub:odd',
        mass: 1,
        confine:'y'
    },
    {
        layer:'.cub:even',
        mass: 5,
        confine:'y'
    },    
], {
 repositionTransition:'all 0.5s'
});
    
$('.cub').click(function() {
    $('.inner').animate({
    'margin-left': '-=400px'
    }, 300)
})