SpriteSpin sync frame

Shows how to sync two instances together

by Alexander Gräfenstein

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/release/spritespin.js"></script>
<div id='spritespin1'></div>
<div id='spritespin2'></div>

JavaScript

// initialise spritespin
var spin1 = $('#spritespin1');
var spin2 = $('#spritespin2');

spin1.spritespin({
    source: SpriteSpin.sourceArray('https://spritespin.ginie.eu/images/rad_zoom_{frame}.jpg', { 
        frame: [1, 34], 
        digits: 3 
    }),
    width: 480,
    sense: -1,
    height: 327,
    animate: false,
    onFrame: function(e, data) {
      if (data.frame !== spin2.spritespin("data").frame) {
      	spin2.spritespin("api").updateFrame(data.frame);
      }
    }
});

spin2.spritespin({
    source: SpriteSpin.sourceArray('https://spritespin.ginie.eu/images/rad_zoom_{frame}.jpg', { 
        frame: [1, 34], 
        digits: 3 
    }),
    width: 480,
    sense: -1,
    height: 327,
    animate: false,
    onFrame: function(e, data) {
      if (data.frame !== spin1.spritespin("data").frame) {
      	spin1.spritespin("api").updateFrame(data.frame);
      }
    }
});