JSFiddle - React, Tailwind, and code Playground

by gRoberts

HTML

<div id="test"><img src="http://media.parlingo.com.s3.amazonaws.com/website/live/messagepacks/gavintest/Lovesick/Bear-4/sheet_3x16.png" /><span></span></div>

CSS

#test {
    position: relative;
}
#test span {
    position: absolute;
    width: 52px;
    height: 73.875px;
    border: solid 1px #000;
    left: 0;
    top: 0;
}

JavaScript

var xTick = 0;
var yTick = 0;
function render() {
    
    var frameX = xTick % 3,
        frameY = yTick % 16,
        frameWidth = 52,
        frameHeight = 73.875,
        span = $('#test span');
    
    span.css({
        left : (frameX * frameWidth),
        top : (frameY * frameHeight)
    });
    
    yTick++;
    if (yTick % 16 === 0) {
        xTick++;
    }
    console.log([frameX, frameY]);
}
(function($) {
    
    setInterval(render, 200);
    
})($);