JSFiddle - React, Tailwind, and code Playground

by NinjaSk8ter

HTML

<div id='rightcontentbox'>
    <div class='testim'>
        <div class='letter'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam euismod sem facilisis neque blandit 
        </div>
        <div class='author'>BOB
        </div>
    </div>
    <div class='testim'>
        <div class='letter'>Vivamus nec tellus dui. Etiam pretium, libero sed eleifend laoreet, arcu massa suscipit nisl, sed 
        </div>
        <div class='author'>JOE
        </div>
    </div>
</div>

CSS

#rightcontentbox {
    float: left;
    width: 285px;
    overflow: hidden;
    padding:6px 6px 1px 6px;
    background-color: green;
}
.testim {
    padding: 10px;
}
.testim .letter{
    position: relative;
    left: -285px;
}
.testim .author{
    position: relative;
    right: -285px;
}

JavaScript

var delay = 1000;
$('.testim').each(function(){
    $this = $(this)
    $letter = $this.children('.letter');
    $author = $this.children('.author');
    $letter.delay(delay).animate({"left": "+=285px"}, 'slow');
    $author.delay(delay).animate({"right": "+=278px"}, 'slow');
    delay = delay+1600;
})