JSFiddle - React, Tailwind, and code Playground

by alekskorovin

HTML

<div class="body">
    <div class="new"></div>
</div>
<button id="start">start</button>
<button id="stop">stop</button>

CSS

.new {
        left: 0;
        position: absolute;
    width: 10px;
    height: 10px;
    background: orange;
    float: left;
    }
.body {
    
    width: 100%;
    height: 500px;
}
    button {
    position: absolute;
    top: 20px;
    left: 20px;
    }
    #stop {
    left: 100px;
    }

JavaScript

var globalID;
function repeatOften() {
    
    $(".new").css({
        'left': parseFloat($(".new").css('left'))+3+'px'   
    });
    globalID = requestAnimationFrame(repeatOften);
}
$("#start").on("click", function() {
    globalID = requestAnimationFrame(repeatOften);
});
$("#stop").on("click", function() {
    cancelAnimationFrame(globalID);
});