JSFiddle - React, Tailwind, and code Playground

HTML

<a href="www.google.com">Click on me!</a>
<div class="main-content">
    <div class="slidingbox">
        Mattis arcu, non rhoncus ac ac, nunc rhoncus cras sit? Amet purus? Penatibus magna nisi facilisis! Aliquam diam etiam penatibus, velit! Facilisis aliquet porta? Massa risus! Ac a, dolor duis lorem enim nec! Phasellus! Enim est, tortor platea placerat! Et? Penatibus duis. Eros nisi, magnis, dis egestas, sit porta odio in nunc tempor pulvinar, arcu ac, scelerisque adipiscing pid et.
    </div>
    
    <div class="slidingbox">
        Cursus pid lundium? Purus! Mus dignissim nec etiam placerat, ultrices nisi, diam! Pid, arcu porta vut augue augue lundium, proin tortor dis nec a augue? In ridiculus rhoncus adipiscing phasellus aenean nec mattis amet natoque, dis facilisis et sociis ridiculus integer. Scelerisque amet mid augue, tristique porttitor, ultrices vel mauris sed eu cras est tortor nec, magna cras auctor.
    </div>
    
    <div class="slidingbox">
        Integer mauris integer non, in? Dapibus placerat tincidunt lorem, placerat nisi, purus? Eros phasellus augue, porta in arcu porttitor est tortor eu tincidunt tortor ut nunc adipiscing? Dignissim? Porta dolor aenean? Sagittis! Turpis! Nisi, enim, in porttitor lacus egestas, lundium ridiculus vel sagittis dictumst, vut aliquam scelerisque? Magna. Odio, nunc odio lundium lundium in augue aenean non elit amet.
    </div>
    
    <div class="slidingbox">
        Mattis arcu, non rhoncus ac ac, nunc rhoncus cras sit? Amet purus? Penatibus magna nisi facilisis! Aliquam diam etiam penatibus, velit! Facilisis aliquet porta? Massa risus! Ac a, dolor duis lorem enim nec! Phasellus! Enim est, tortor platea placerat! Et? Penatibus duis. Eros nisi, magnis, dis egestas, sit porta odio in nunc tempor pulvinar, arcu ac, scelerisque adipiscing pid et.
    </div>
    
    <div class="slidingbox">
        Cursus pid lundium? Purus! Mus dignissim nec etiam placerat, ultrices nisi, diam! Pid, arcu porta vut augue augue...

CSS

.main-content{
    overflow: hidden;
}

.slidingbox{
    width: 95%;
    position: relative;
    margin-left: 920px;
    opacity: 0.0;
    padding: 5px;
}

JavaScript

$(document).ready(function() {

/*
    *    Page load
    */
    $("a").click(function() {
        var linkToGo = $(this).attr("href");
        $(".slidingbox").each(function(index) {
            $(this).delay(index * 50).animate({
                left: "-=940px",
                opacity: "0.9"
            }, 500, function() {
                document.location(linkToGo);
            });
        });
        return false;
    });



/*
    *    Slidingboxes
    */
    $(".slidingbox").each(function(index) {
        $(this).delay(index * 250).animate({
            left: "-=940px",
            opacity: "0.9"
        }, 750).animate({
            left: "+=20px",
            opacity: "1"
        }, 150);
    });

});