JSFiddle - React, Tailwind, and code Playground

by shooter

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>

<div id="container">
<div id="zipper"></div>
<div class="left"></div><div class="right"></div>
<div class="left"></div><div class="right"></div>
<div class="left"></div><div class="right"></div>
<div class="left"></div><div class="right"></div>
<div class="left"></div><div class="right"></div>
<div class="left"></div><div class="right"></div>
<div class="left"></div><div class="right"></div>
<div class="left"></div><div class="right"></div>
<div class="left"></div><div class="right"></div>
<div class="left"></div><div class="right"></div>
<div class="left"></div><div class="right"></div>
<div class="left"></div><div class="right"></div>
<div class="left"></div><div class="right"></div>
<div class="left"></div><div class="right"></div>
<div class="left"></div><div class="right"></div>
<div class="left"></div><div class="right"></div>
<div class="left"></div><div class="right"></div>
<div class="left"></div><div class="right"></div>
<div class="left"></div><div class="right"></div>
<div class="left"></div><div class="right"></div>
<div class="left"></div><div class="right"></div>
</div>

CSS

#container {
    height: 300px;
    padding-top:20px;
}

#zipper {
    height: 50px;
    width: 20px;
    cursor: pointer;
    border: solid 1px red;
    position: absolute;
    top: 30px;
    left: 50%;
    margin-left: -10px;
    z-index: 1;
}

.left, .right {
    height: 10px;
    width: 50px;
    border: solid 1px black;
    left: 50%;
    position: relative;
}

.left {
    float: left;
    margin-left: -45px;    
}

.right{
    margin-left: -5px;    
}

JavaScript

$('#zipper').draggable({
    axis: 'y',
    containment: 'parent',
    drag: function(event, ui) {
        var top = ui.position.top;
        $('.left').each(function() {
            var $this = $(this);
            var thisTop = $this.position().top;
            if (top > thisTop) {
                $this.css(
                    'margin-left', 
                     -(Math.pow((top-thisTop), 2.2)/1500 + 45)  
                );
            }
        });
        $('.right').each(function() {
            var $this = $(this);
            var thisTop = $this.position().top;
            if (top > thisTop) {
                $this.css(
                    'margin-left', 
                     Math.pow((top-thisTop), 2.2)/1500 - 5   
                );
            }
        });
    }
});