JSFiddle - React, Tailwind, and code Playground

by doug65536

HTML

<div id="slideme"></div>
<button id="left">Slide left</button>
<button id="right">Slide right</button>

CSS

#slideme {
    position: relative;
    width: 100px;
    height: 100px;
    border: solid black 1px;
}

JavaScript

function slide(element, pixels, duration) {
    var start = new Date();
    
    var start_x = parseInt(element.style.left, 10);
    
    function frame() {
        var now = new Date(),
            elap = now - start,
            frac = Math.min(elap / duration, 1),
            pos = start_x + (pixels * frac);
        
        element.style.left = (pos || 0) + "px";
        
        if (frac < 1) {
            window.requestAnimationFrame(frame);
        }
    }
    window.requestAnimationFrame(frame);
}

var div = $('#slideme');
$('#left').on('click', function() {
    var elem = document.getElementById("slideme");
    slide(elem, -200, 1000);
});
$('#right').on('click', function() {
    var elem = document.getElementById("slideme");
    slide(elem, 200, 1000);
});