JSFiddle - React, Tailwind, and code Playground

by keefies

HTML

<img id="pin" src="http://isogashii.com/projects/javascript/ch10/assets/pin0.gif" alt="pin animation" />

JavaScript

var pin = new Array(9);
var curPin = 0;
var x = false;

    function pinF() {
    
        if (x == true) {
            --curPin;
            if (curPin == 0) {
                curPin = 1;
                x = false;
            }
        }
        if (x == false) {
            ++curPin;
            if (curPin == 8) {
                x = true;
            }
        }
        
        document.getElementById("pin").src = pin[curPin].src;
    }

// caching images
for (var imagesLoaded=0; imagesLoaded < 9; ++imagesLoaded) {
    pin[imagesLoaded] = new Image();
    pin[imagesLoaded].src = "http://isogashii.com/projects/javascript/ch10/assets/pin" + imagesLoaded + ".gif";
}

setInterval(function(){pinF();}, 120);