JSFiddle - React, Tailwind, and code Playground

by slace

HTML

<div id="story-book">
    <div>
        <p>This is the first step in our story</p>
    </div>
    <div>
        <p>This is the second step of our story</p>
    </div>
</div>
<button>Next</button>

CSS

#story-book div {
    width: 200px;
    height: 200px;
    background-color: #0f0;
    float:left;
}

p { padding: 20px; }

JavaScript

$(function() {
   var storyBook = $('#story-book'),
       stories = storyBook.find('> div'),
       current = storyBook.find(':first');
   
   stories.hide();
    
    current.show();
    
    $('button').click(function(e) {
       e.preventDefault();

       var start = +new Date,
           duration = 3000,
           end = start + duration,
           scaleX_start = 1,
           scaleX_end = 0,
           el = current.get(0),
           next = stories[1];
       
        next.style['transform'] =
            next.style['-ms-transform'] =
            next.style['-moz-transform'] =
        next.style['webkit-transform'] = '';
        
        $(next).show();
        
        function go() {
            var now = +new Date,
                foo = now > end ? 1 : (now - start) / duration; 
            
            if(now >= end) return;
                
            scaleX_start = (scaleX_start + (scaleX_end - scaleX_start) * ((-Math.cos(foo * Math.PI) / 2) + 0.5));
            
            el.style['transform'] =
            el.style['-ms-transform'] =
            el.style['-moz-transform'] =
            el.style['-webkit-transform'] =
                'scaleX(' + scaleX_start + ')';
            
            var bar = scaleX_start;
            
            next.style['transform'] =
            next.style['-ms-transform'] =
            next.style['-moz-transform'] =
            next.style['webkit-transform'] =
                'scaleX(' + scaleX_start + ')';
            console.log(next);
            setTimeout(go, 10);
        } 
        go();
    });
});