JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.10.3/TweenMax.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.10.3/plugins/ScrollToPlugin.min.js"></script>

<div id="container">
    <div id="outerRect">
        <div id="rect1" class="rect"> </div>
        <div id="rect2" class="rect"> </div>
        <div id="rect3" class="rect"> </div>
    </div>
</div>

CSS

#rect1 {
    background-color: red;
}
#rect2 {
    background-color: white;   
}
#rect3 {
    background-color: blue;
}
.rect {
    margin: 30px 0px 0px 75px;
    width: 150px;
    height: 75px;
    display:inline-block;
    white-space:normal;
}
#outerRect {
    width: 800px;
    height:500px;
}
#container {
    background-color: lightgray;
    width:150px;
    height:75px;
    overflow: hidden;
}

JavaScript

var inZoom = false;
function toggleZoom(e) {
    if(inZoom) {
        goBack(e);
    } else {
        doFlyUp(e);
    }
    inZoom = !inZoom;
}
function doFlyUp(e) {
    var tl = new TimelineMax();
    tl.append(TweenLite.to("#container", 0.6, {scrollTo:{x:($(e.target).position().left+66.666)*4, y:30}, ease:"Expo.easeOut"}));
    tl.append(TweenLite.to("#outerRect", 0.6, {scaleX:1, scaleY:1, ease:"Expo.easeOut", onComplete:function() {
        $(".rect").hide();
        $(e.target).show();
        $(e.target).css({"position": "absolute", "margin":"0px"});
		TweenLite.to("#outerRect", 0, {transformOrigin:"left top", scaleX:1, scaleY:1});
        TweenLite.to("#container", 0, {scrollTo:{x:0,y:0}});
		tl.kill();
    }}), -0.6);
}
function goBack(e) {
    $(e.target).css({"position": "inline-block", "width":"150px", "height":"75px", "white-space":"normal", "margin":"30px 0px 0px 75px"});
    $(".rect").show();
    var tl = new TimelineMax();
    tl.append(TweenLite.to("#outerRect", 0, {transformOrigin:"left top"}));
    tl.append(TweenLite.to("#container", 0.6, {scrollTo:{x:0, y:0}, ease:"Expo.easeOut"}));
    tl.append(TweenLite.to("#outerRect", 0.6, {scaleX:0.25, scaleY:0.25, ease:"Expo.easeOut"}), -0.6);
}

$(".rect").click(toggleZoom);
var tl = new TimelineMax();
tl.append(TweenLite.to("#outerRect", 0, {transformOrigin:"left top", scaleX:0.25, scaleY:0.25}));