JSFiddle - React, Tailwind, and code Playground

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="demo">

</div>

JavaScript

$("#demo").spritespin({
	source: "https://www.jurassicworldevolution.com/files/360-sprites/ankylosaurus_spritesheet_0.jpg",
  // Define the size of the display.
  width: 640,
  height: 360,
  // The total number of frames to show. Here it is 34 although
  // 36 images might fit into the sprite. But the last two are
  // missing as you can see in the image
  frames: 180,
  // The number of frames in one row of the sprite sheet
  // This can often be omitted. Spritespin might calculate the right number by its own.
  // Interaction sensitivity and direction
  framesX: 14,
  frameTime: 33.333,
  loop: true,
  sense: -1,
  responsive: false,
  reverse: false,
  sizeMode: 'fit',
  mods: ['drag', '360'],
  canvasRatio: 1
})