JSFiddle - React, Tailwind, and code Playground

by levchenko_d

HTML

<div class="c">
    <div class="w"></div>
</div>

CSS

.c{
    width: 600px;
    height: 400px;
    overflow: hidden;
    position: relative;
}

.w{
    width: 2500px;
    height: 400px;
    position: absolute;
}

.d{
    display: inline-block;
    height: 400px;
    width: 50px;
    border: solid 1px silver;
    float: left;
    margin-right: 10px;
}

JavaScript

var c = document.querySelector('.c'),
w = document.querySelector('.w'),
dragg = false,
sE = {},
dE = {},
eE = {},
    st=0,
    et=0,
x = 0,
sx = 0;
cx = 0;

for(var i=0;i<50;i++){
var d = document.createElement('div');
d.className= 'd';
d.innerText = i;
w.appendChild(d);
}

Math.easeOutQuad = function (t, b, c, d) {
	t /= d;
	return -c * t*(t-2) + b;
};

Math.easeOutCubic = function (t, b, c, d) {
	t /= d;
	t--;
	return c*(t*t*t + 1) + b;
};

Math.easeOutQuint = function (t, b, c, d) {
	t /= d;
	t--;
	return c*(t*t*t*t*t + 1) + b;
};

function animate(destination, duration, callback){
    var time = 0;
    var step = 10;
    var distance = 0;
    
    if(destination >= 0){
        distance = -cx;
        console.log('0', distance)
    } else if(destination <= -2000){
        distance = -(2000-Math.abs(cx))
        console.log('1', distance)
    } else{
        distance = destination-cx;
        console.log('2', distance)
    }
    
    
    
    var timer = window.setInterval(function(){
        var val = Math.easeOutCubic(time, cx, distance, duration);
        if(time<=duration){
            w.style.webkitTransform = 'translateX('+val+'px)';
            time += step;
        } else {
            window.clearInterval(timer);
            callback(val);
        }
        
    },step)
}

function momentum(){
    var distance = eE.pageX - sE.pageX,
        direction = eE.pageX > sE.pageX ? 1 : -1,
        speed = Math.abs(distance)/(et-st),
        deceleration = 0.3,
        duration = speed/(deceleration/20),
        destination = cx + ((speed * speed)/(2*deceleration) * ( distance < 0 ? -1 : 1 ));
    
    return {
        duration: Math.abs(duration),
        destination: destination
    }
}


function move(e){
    dE = e;
    st = new Date().getTime();
    if(dragg){
        var sx = sE.pageX,
            dx = dE.pageX;
        x = cx+(dx-sx);
        w.style.webkitTransform = 'translateX('+x+'px)';
    }
}

function stop(e){
    eE = e;
    dragg = false;
   ...