JSFiddle - React, Tailwind, and code Playground

by Daniel Mason

HTML

<div id="animate">
    <div id="box"></div>
</div>

CSS

#animate {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: red;
    overflow: hidden;
}

#box {
    position: absolute;
    width: 50px;
    height: 50px;
    left: 0;
    top: 0;
    background-color: blue;
}

JavaScript

var sam = function() { // Changed this to show functions are variables
        $("#box")
            .animate({left: $("#animate").width()+'px'}, 1000, 'linear')
            .animate({left: '-'+$("#box").width()+'px'}, 0, 'linear', sam);
    };
    sam(); // Call the function the first time.