JSFiddle - React, Tailwind, and code Playground

by Paulpro

JavaScript

(function(){
    function createAnimateElement(el, str){
    
    var d = document.createElement('div');
    el.appendChild(d);
    d.style.position = 'relative';
    
    var e = document.createElement(str),
        s = e.style;
    d.appendChild(e);
    
    s.position = 'absolute';
    s.left =s.top = '0';
    
    
    e.animateBy = function(xinc, yinc, dur, cb){
        dur = typeof dur === 'number' ? dur : 1000;
        
        var stepx = xinc*20/dur,
            stepy = yinc*20/dur,
            x = parseInt(s.left, 10),
            y = parseInt(s.top, 10),
            endx = x + xinc,
            endy = y + yinc;
        
        +function step(){
            x += stepx;
            y += stepy;
            
            if(stepx > 0 && x > endx)
                x = endx;
            else if(stepx < 0 && x < endx)
                x = endx;
            
            if(stepy > 0 && y > endy)
                y = endy;
            else if(stepy < 0 && y < endy)
                y = endy;
            
            s.left = x + 'px';
            s.top = y + 'px';

            if(x !== endx || y !== endy)
                setTimeout(step, 20);
            else if(typeof cb === 'function')
                cb();
        }();
    }
          
    e.animateTo = function(x, y, dur, cb){
        e.animateBy(x -parseInt(s.left, 10), y - parseInt(s.top, 10), dur, cb);
    }
    return e;
}

          document.onkeypress = function(){

    var f = createAnimateElement(document.body, 'img');
    f.src = 'http://www.clker.com/cliparts/b/7/5/b/12517962551900438138Stick_Figure.svg.hi.png';
    f.style.width = '100px';
        f.animateBy(400, 0, 2000, function(){ 
            f.animateTo(0, 100, null, function(){
                f.animateBy(400, 100, 500, function(){
                    f.animateBy(-500, 125, 100, function(){
                        f.parentNode.removeChild(f);
                    });
                });
            });
        });
    }
})();