JSFiddle - React, Tailwind, and code Playground

by Ranganadh Paramkusam

HTML

<div id="main">
    <div class="menu">
        <a href="#">FACE</a>
    </div>
    <div class="menu">
        <a href="#">BODY</a>
    </div>
</div>
<button id="run">Run animation</button>

CSS

#main{
    position:absolute;
    top:0px;
    left:0px;
    background:grey;
    width:320px;
    height:540px;
}
a{
    text-decoration:none;
    color : white;
    background: rgba(255,0,0,1);
    width:100%;
    height:30px;
    line-height:30px;
    font:25px sans-serif;
    font-weight:100;
    display:inline-block;
    margin:1px 0;
    bottom: 0px;
    position: absolute;
    transition-duration:500ms;
}
button{position:absolute;}
.menu {
    height: 50%;
    position: relative;
    width: 100%;
}
.menu:nth-child(2) a{
    top: 0px;
}

JavaScript

var near = false;
$(document).ready(function(){
    $("#run").click(function(){
        near = ! near;
        if(near){
            $(".menu a:first").css("transform","translate3d(0px,-238px,0)");
            $(".menu a:last").css("transform","translate3d(0px,238px,0)");
        } else {
            $(".menu a:first").css("transform","translate3d(0px,0px,0)");
            $(".menu a:last").css("transform","translate3d(0px,0px,0)");
        }
    });
});