JSFiddle - React, Tailwind, and code Playground

by pseudosavant

HTML

<!doctype html>
<html>
    <head>
    </head>
    <body>
        <div id="nav">Switch</div>
        <div id="container"><div id="tab1" class="tabs">word123 word456 wordabc wordxyz word123 word456 wordabc wordxyz word123 word456 wordabc wordxyz word123 word456 wordabc wordxyz word123 word456 wordabc wordxyz word123 word456 wordabc wordxyz word123 word456 wordabc wordxyz word123 word456 wordabc wordxyz word123 word456 wordabc wordxyz word123 word456 wordabc wordxyz word123 word456 wordabc wordxyz word123 word456 wordabc wordxyz </div><div id="tab2" class="tabs">&nbsp;</div></div>
    </body>
</html>

CSS

html, body {
    width: 320px; height: 480px;
    overflow: hidden;
    position: relative;
}

#container {
    width: 320px;
    text-wrap: none;
}

#tab1, #tab2{
    width: 320px; height: 480px;
    position: absolute;
    top: 0;
}
#container { position: relative; }
#nav { cursor: pointer; }

#tab1 { background-color: blue; left: 320px; }
#tab2 { background-color: red; display: none; }

JavaScript

var animateWidth = function (element, start, end, styleProperty, duration) {
    duration = duration || 500;

    var frames = (duration / 1000) * 120;
    var length = 1000 / 120;
    var delta = (end - start) / frames;

    for (var i = 0; i < frames; i++) {
        setTimeout((function (i, delta, start) {
            return function () {
                element.style[styleProperty] = Math.round(i * delta + start) + "px";
            };
        })(i, delta, start), Math.round(i * length));
    }

    setTimeout(function () {
        element.style[styleProperty] = end + "px";
    }, duration + 4);

    if (!!callback) {
        setTimeout(callback, duration);
    }
};

$("#nav").click(function () {
    var $e = $("#tab1");
    var e = $e.get(0);
    animateWidth(e, 320, -320, "left", 500);
});

// http://jsfiddle.net/pseudosavant/wrSYT/