JSFiddle - React, Tailwind, and code Playground

by marcuswhybrow

HTML

<div class="wrapper">
    <div class="inline"></div>
    <div class="inline"></div>
    <div class="inline"></div>
</div>

CSS

div.wrapper {
    width: 250px; /* or whatever */
    overflow: hidden;
    white-space: nowrap;
    border: 1px solid red;
    height: 20px;
}

div.inline {
    display: inline;
    width: 80px;
    height: 20px;
    background-color: black;
}

JavaScript

function recAnimate(obj) {
    obj.animate({
        width: obj.width() > 225 ? '200px' : '300px'
    }, 1000, function() {
        recAnimate(obj);
    })
}

recAnimate($('div.wrapper'));