JSFiddle - React, Tailwind, and code Playground

by remibreton

HTML

<div id="hero"></div>

CSS

div { width:100px; height:100px; background-color:blue; position:absolute; left:0; }

JavaScript

var h = document.getElementById('hero'),
    s = h.style;

h.addEventListener('click', function(event){
	moveBy(h, isNaN(parseInt(s.left)) ? 50 : parseInt(s.left) + 50);
});

function moveBy(element, distance){
    var target = isNaN(parseInt(s.left)) ? distance : parseInt(s.left) + distance;
	(function(){
        s.left = isNaN(parseInt(s.left)) ? '1px' : (parseInt(s.left) + 1).toString() + 'px';
        if(parseInt(s.left) <= distance) setTimeout(arguments.callee, 40);
    })();
}