JSFiddle - React, Tailwind, and code Playground

by Shidhin C R

HTML

<html>
    <body>
        <div class="animate"></div><br/><br/><br/>
    <a href="#" class="start">Start animation</a>    |
    <a href="#" class="stop">Stop animation</a><br/><br/><br/>
            </body>
</html>

CSS

.animate{
    background:url(http://www.google.com/logos/2011/gumby11-pokey.png) no-repeat;
    background-position:-534px 0px;
    height:110px;
    width:1510px;
}

JavaScript

var x=0;
jQuery(function(){    

        var initial = -534;
        x= setInterval(function(){
            initial = initial - 75;
            jQuery(".animate").css("background-position",initial+"px 0px")
            jQuery(".log").html(initial);
            if(initial<=-5500)initial=-534;
        },120);

    jQuery(".stop").click(function(){ 
        clearInterval(x);
    });
});