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="layer one">
        <div class="cub"></div>
        <div class="cub"></div>
        <div class="cub"></div>
    </div>
    <div class="layer two">
        <div class="cub"></div>
        <div class="cub"></div>
        <div class="cub"></div>
    </div>
</div>

CSS

.outer {
    width: 700px;
    height: 100px;
    outline: 3px solid red;
    overflow: hidden;
}

.layer {
    width: 600px;
    height: 100px;
    outline: 1px solid blue;
    position: absolute;
    overflow: hidden;
}

.cub {
    width: 100px;
    height: 100px;
    float: left;
}

.one .cub {
    background-color: red;
    margin-right: 100px;
}

.two .cub {
    background-color: green;
    margin-left: 100px;
}

JavaScript

$('.outer').zlayer([
    {
        layer:'.one',
        mass: 20,
        confine:'y',
        force:'push'
    },
    {
        layer:'.two',
        mass: 10,
        confine:'y',
        force:'pull'
    }
], { repositionTransition:'all 0.5s' });