JSFiddle - React, Tailwind, and code Playground

by Vince

HTML

<div id="container">
    <div id="move"></div>
</div>
<div id="debug"></div>

CSS

html, body {width: 100%; height: 100%; margin: 0; padding: 0;}
#container {width: 90%; height: 500px; margin: auto; display: block; background-color: rgba(0,0,0,0.1);}
#move {width: 30px; height: 30px; background-color: #F00; position: relative;}

JavaScript

var m = document.getElementById('move');

//m['style']['left'] = '10px';

function moveThis (elem, prop, val, ms) {
    var bool = true;
    var myInt = 0;
    var firstVal = 0;
    var max = parseInt(val);
    //elem.style['left'] = '200px';
    var interval = setInterval(function () {
        if (bool) {
            if ( myInt < parseInt(val) ) {
                elem.style[prop] = firstVal + 'px';
            }
            firstVal++;
            if ( myInt == parseInt(val) ) {
                elem.style[prop] = val + 'px';
                clear();
            }  
        }
    }, ms);
    function clear() {
        console.log('stop');        
        clearInterval(interval);
    }
    document.getElementById('debug').innerHTML = 'boom';
}
moveThis(m, 'left', '50px', 4);