JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.8/TweenMax.min.js"></script>
<div id="demo">
    <div id="field">

        <div id="topLayer">
            <div id="paper">
                <ul style="width: 120px">
                    <li>Bildes</li>
                </ul>
            </div>
        </div>

        <div id="controls">
            <button id="animation1">Normal</button>
            <button id="animation2">Rotate Y</button>
            <button id="animation3">Rotate X</button>
        </div>

    </div>
</div>

CSS

body {
  background-color:#fff;
  margin: 0;
  padding: 0;
  font-family: Signika Negative, sans-serif;
  font-weight: 300;
}
html, body {
  height: 100%;
}
#demo {
  display:table;
  width:100%;
  height:100%;
  max-height:600px;
}
#field {
  position:relative;
  display:table-cell;
  height: 100%;
  overflow:hidden;
  text-align: center;
}
#paper {
  display:none;
  color: black;
  font-size:20px;
  font-style:italic;
  padding: 10px 16px;
  background-color: #06F;
    color: white;
  margin:auto;
  height:510px;
  width:400px;
  margin-top:10px;

}
#doors{
  color: #ddd;
  font-size:24px;
  padding: 10px 16px;
  background: #fff;
  height:350px;
  width:240px;
  margin:10px auto 0 auto;
  top:0px;
}
#doors > ul{
    list-style:none;
    cursor:pointer;
    padding-left:0px;
}
#doors > ul li{
    margin-top:20px;
}
#topLayer{
    position:fixed;
    width:100%;
    height:100%;
    top:0;
}

#field p {
  position: absolute;
  color: #999;
  top: 0px;
  padding: 0px 20px;
  text-align: left;
  z-index: -1000;
}
#controls {
  position:absolute;
  color: #999;
  width: 100%;
  bottom: 20px;
  text-align: center;
}
button {
  margin: 2px;
}

JavaScript

var $paper = $("#paper"),
    $field = $("#field"),
    $topLayer = $("#topLayer"),
    $doors = $("#doors"),
    rotation = 0,
    rotationX = 0,
    rotationY = 0;

var toggleAnim = true;

TweenLite.set($field, { perspective: 360 });
TweenLite.set($paper, { transformOrigin: "center top -340px" });

//Pirma animacija
$("#animation1").click(function () {

    if (toggleAnim)
    {
        toggleAnim = false;
        rotationX += 90;
        TweenLite.to($paper, 1, { rotationX: rotationX, ease: Power2.easeOut });
        TweenLite.to($paper, 5, { width: 400, height: 510, top: 10 });
        TweenMax.to($paper, 0.2, {
            scaleX: 0.8, scaleY: 0.8, force3D: true, yoyo: true, repeat: 1
        });
        $paper.animate({ 'margin-top': '10px' }, 3);
    }
    else
    {
        toggleAnim = true;
        rotationX -= 90;
        TweenLite.to($paper, 1, { rotationX: rotationX, ease: Power1.easeInOut });
        TweenLite.to($paper, 5, { width: 140, height: 250 });
        TweenMax.to($paper, 1.2, {
            scaleX: 0.8, scaleY: 0.8, force3D: true, yoyo: true, repeat: 1,
            ease: Power1.easeIn
        });
        $paper.animate({ 'margin-top': '100px', }, 3);
        $paper.animate({ 'margin-top': '130px' }, 3);
        $paper.animate({ 'margin-top': '160px' }, 3);
    }
});

//otra animacija
$("#animation2").click(function () {

    if (toggleAnim) {

        toggleAnim = false;
        rotationX += 90;
        rotationY += 360;
        TweenLite.to($paper, 1, { rotationX: rotationX, ease: Power2.easeOut });
        TweenLite.to($paper, 5, { width: 400, height: 510, top: 10 });

        TweenLite.to($paper, 2, {rotationY:rotationY, x: 0, y: 0,top:10 });

        TweenMax.to($paper, 0.2, {
            scaleX: 0.8, scaleY: 0.8, force3D: true, yoyo: true, repeat: 1
        });

        $paper.animate({ 'margin-top': '10px' }, 3);
    }
    else {

        toggleAnim = true;
        rotationX -= 90;
        rotationY -= 360;
       ...