JSFiddle - React, Tailwind, and code Playground

by Castrolol

HTML

<img src="http://baconmockup.com/500/350" data-alt-src="http://placekitten.com/500/350" />

JavaScript

var img = document.querySelector("img");
var changeSrc = img.getAttribute("data-alt-src");

var div = document.createElement("div");
div.style.width = img.width + "px";
div.style.height = img.height + "px";
div.style.background = "url(\""+changeSrc+"\")";

img.parentElement.appendChild(div);

img.parentElement.removeChild( img );

var quantidade = 10;

var size = Math.round( img.width / quantidade );

var pieces = [];

for(var i = 0; i < quantidade; i++ ){

    var divS = document.createElement("div");
    divS.style.width = size + "px";
    divS.style.height = img.height + "px";
    divS.style.background = "url(\""+img.src+"\")";
    
    divS.style.float = "left";
    divS.style.position = "relative";    
//    divS.style.left = ( i * size ) + "px";
    divS.style["background-position"] = "-" + ( i * size ) + "px 0px";
    
    div.appendChild( divS );
    pieces.push( divS );

}

var index = 0;

function movimento(){

    if( index < pieces.length ){
        
        (function(){
            var divX = pieces[index];
            var interval = setInterval(function(){
                console.log(divX.style.width);
                divX.style.width = ( ( +(divX.style.width.replace("px","")) - 3 ) <= 0 ? 1 : +(divX.style.width.replace("px","")) - 3 ) + "px";
                divX.style["margin-left"] = ( +(divX.style["margin-left"].replace("px","")) + 1 ) + "px";
                divX.style["margin-right"] = ( +(divX.style["margin-right"].replace("px","")) + 2 ) + "px";
                divX.style["background-position-x"] = ( +( divX.style["background-position-x"].replace("px","")) - 1 ) + "px";
                
                if( +(divX.style.width.replace("px","")) <= 2){
                    debugger;
                     divX.style.opacity = "0";
                    clearInterval(interval);
                    
                }
                
            },20);

        }());
        
        index++;   
        setTimeout(function(){ movimento(); }, 50);
   ...