JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div id="mask"></div>
    <div id="colorfill-1"></div>
    <div id="colorfill-2"></div>
</div>

CSS

html { background: white; }

#wrapper {
    position: relative;
    float: left;
}

#mask {
    position: absolute;
    z-index: 3;
    top: 0px;
    left: 0px;
    background: url('http://constructionnews.ie/wp-content/uploads/2016/09/airbnb-logo.png') no-repeat center center;
    width: 238px;
    height: 238px;
}

#colorfill-1 {
    position: absolute;
    z-index: 1;
    top: 0px;
    left: 0px;
    background: #e5e5e5;
    width: 238px;
    height: 238px;
}
#colorfill-2 {
    position: absolute;
    z-index: 2;
    top: 0px;
    left: 0px;
    background: #b0b0b0;
    width: 65px;
    height: 238px;
}

JavaScript

var colorfill = $('#colorfill-2');

colorfill.animate({
	width: 171
}, 3000, function() {

    colorfill.animate({
        opacity: 0
    }, 500 );
    
});