JSFiddle - React, Tailwind, and code Playground

by joecritch

HTML

<div class="horz-mask">
    <ul class="horz-mask-inner">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>

CSS

/** ---------------------------------------
 * Horizontal mask
 */
 
.horz-mask { position: relative; overflow: hidden; height: 100px; width: 200px; }
.horz-mask-inner { position: absolute; top: 0; left: 0; width: 20000em; overflow: hidden; margin-left: 0; height: 100px; }
.horz-mask-inner li { float: left; display: inline; width: 100px; height: 100px; background: #ccc; }

JavaScript

$(document).ready(function() {
   
    setTimeout(function() {
        $('.horz-mask-inner').animate({
            left: '-100px'
        }, {
            duration: 500 
        });
    }, 500); 
    
});