JSFiddle - React, Tailwind, and code Playground

by gunderson

HTML

<script src="//cdn.jsdelivr.net/velocity/1.1.0/velocity.min.js"></script>
<div id="container">
    <div id="page0" class="page active">
        <h1>Page 0</h1>
    </div>
    <div id="page1" class="page inactive">
        <h1>Page 1</h1>
    </div>
</div>

CSS

* {
    box-sizing: border-box;
}
body, html, #container, .page{
    position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.page{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    padding: 20px;
}

#page0{
    background-color: #ddd
}

#page1{
    background-color: #eee
}

JavaScript

function changePage(){
    var $active = $('.active'),
        $inactive = $('.inactive');
    
    
    $active.velocity({
        translateX: "-100%"
    },{
        display: "none",
        duration: 2000
    })
    .removeClass('active')
    .addClass('inactive');
    
    $inactive.velocity({
        translateX: "100%"
    }, {
        duration:0
    })
    .velocity({
        translateX: 0
    },{
        display: "block",
        duration: 2000
    })
    .removeClass('inactive')
    .addClass('active');
}

$(window).click(changePage);

$(".active").show();