JSFiddle - React, Tailwind, and code Playground

by Seetpal Singh

HTML

<div id="selector"></div>

CSS

#selector {
    width:200px;
    height:200px;
    display:block;
    background-position:0px 0px;
    background-image:url('http://cdn.shopify.com/s/files/1/0274/0775/t/2/assets/logo.png?10801');
}

JavaScript

var $height = 88;
    var i = 1; // Starting Point


    (function animateMe(i) {

        if (i >= $height) {
            i = 0;
        }
        var newHeight = 0 - ($height * i) + "px"; // Creat New Height Position
        // console.log(i); //Testing Purposes - You can Delete
        $('#selector').css({
            "background-position": "0px " + newHeight
        }); // Set New Position
        i++; // Increment by 1 (For Loop Replacement)  
        setTimeout(function () {
            animateMe(i);
        }, 100); // Wait 1 Second then Trigger Function  
    })(0);