JSFiddle - React, Tailwind, and code Playground

by adeneo

HTML

<div id="container">
    <div id="gameStage"></div>
    <div id="nextStage"></div>
</div>
<button id="animate">Animate</button>

CSS

#container {
    height: 400px;
    width: 400px;
    border-style: dotted;
    left: auto;
    right: auto;
    position: relative;
    overflow: hidden;
}
#gameStage {
    height: 400px;
    width: 400px;
    background-color: brown;
    display: inline-block;
    overflow: hidden;
    position: absolute;
}
#nextStage {
    height: 400px;
    width: 400px;
    background-color: green;
    display: inline-block;
    position: absolute;
    left: 100%;
}

JavaScript

$("#animate").click(move)

function move() {
    $("#gameStage").animate({
        left: "-100%"
    }, {
        duration: 2000,
        queue: false
    });
    $("#nextStage").animate({
        left: "50%"
    }, {
        duration: 2000,
        queue: false
    });
}