JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.8/TweenMax.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.8/plugins/CSSRulePlugin.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.8/plugins/ColorPropsPlugin.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.8/plugins/TextPlugin.min.js"></script>
<div class="demoWrapper hideIE9">
    <div class="stage">
        <div id="box1" class="doors"></div>
        <div id="box2" class="to_box"></div>
    </div>
</div>
<button id="#aniBox1">Animate second box</button>
<button id="#aniBox2">Animate first box</button>

CSS

.demoWrapper {
    width: 550px;
    height: 400px;
    background-color: #000;
    -webkit-font-smoothing: antialiased;
    margin: -1px -1px 30px 10px;
    padding: 1px;
}
.stage {
    height: 325px;
    margin-top: 15px;
    margin-left: 15px;
    color: #DDD;
    margin-right: 10px;
    font-family: Arial, Helvetica, Verdana;
}
.tweenCode {
    font-size: 14px;
    background-color: #FFF;
    color: #000;
    margin-right: 10px;
    margin-top: 20px;
    margin-bottom: 10px;
    padding: 4px;
}
.doors {
    position: relative;
    width: 150px;
    height: 300px;
    background-color:brown;
    display: inline-block;
    margin: 5px 20px 20px 205px;
    text-align:center;
}
.paper {
    position: relative;
    width: 50px;
    height: 50px;
    background-color: #ddd;
    color:#000;
    display: inline-block;
    margin: 10px 20px 20px 20px;
}

JavaScript

var     box1 = $("#box1"),
	    box2 = $("#box2");

TweenLite.set([box1], {css:{transformPerspective:100}});

to_tween = new TimelineMax({paused:true});

to_tween.to(box1,  3, {css:{rotationX:180, transformOrigin:"left top"}})
	    .to(box2,  3, {css:{rotationY:360, transformOrigin:"50% 50% -200"}}, 0, 0);

box1.click(function () {
    to_tween.play();
});