JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://no81no.com/temp/jsfiddle/timeline.js"></script>
<button id="btn">Go</button>

<div id="container">
	<div id="slider" style="background: url('http://no81no.com/temp/jsfiddle/1.jpg');">											
		<div class="slices">
		    <div class="slice"></div>
            <div class="slice"></div>
            <div class="slice"></div>
            <div class="slice"></div>
            <div class="slice"></div>
            <div class="slice"></div>
            <div class="slice"></div>
            <div class="slice"></div>
            <div class="slice"></div>
            <div class="slice"></div>
            <div class="slice"></div>
            <div class="slice"></div>
		</div>
	</div>
</div>

CSS

body, html{
    font-family: 'arial';
    font-size: 12px;
    padding: 0;
    margin: 0;
}

#btn{    
    margin: 20px;
}

#container {
    margin: 0 auto;
    position: relative;
    width: 600px;
}

#slider {				
    box-shadow: 0 1px 5px #999999;
    margin: 0 auto;
    position: relative;
    transform: translate3d(0px, 0px, 0px);
}

#slider, 
.slice{
    height: 400px;
    width: 600px;
}

.slice{
    z-index: 1; 
    position: absolute;
    top: 0;
    height: 400px;
    background: url('http://no81no.com/temp/jsfiddle/2.jpg');
}

JavaScript

var $blocks = $('.slice')
    ,$container = $('#container')
    ,WIDTH = 600
    ,HEIGHT = 400
    ,SLIDES_NUM = 12;

//iit timeline
timeline = new jQuery.Timeline({
    duration: 300			
    ,fps: 24
}, $container);
    
$('#btn').on('click', function(){
    
    //start timeline
    timeline.play(1500);  
});
    
/**
* animation step event
*/
$container.on('animationStepEvent', function(e, percent){		
    		
	var maxSlideWidth = WIDTH/SLIDES_NUM
		,width = percent*maxSlideWidth/100
		,opacity = percent*3/100;
						
	$blocks.each(function(index, value){
		
		var left = maxSlideWidth * index
			,height = percent*HEIGHT/100
            ,delay = index*1;
        
        percent = (100 - delay)/100*percent + delay;
        height = (percent/100)*HEIGHT;
		
		$(this).css({
			width: width
			,height: height
			,opacity: opacity
			,left: left
			,'backgroundPosition': '-' + maxSlideWidth*index + 'px 0'
		});
	});
});