Spritesheet Test

by Jake Cattrall

HTML

<script src="https://rawgit.com/jQueryKeyframes/jQuery.Keyframes/master/jquery.keyframes.min.js"></script>
<script src="https://rawgithub.com/jQueryKeyframes/Keyframes.Pathfinder/master/keyframes.pathfinder.js"></script>
<script src="https://rawgit.com/jQueryKeyframes/Keyframes.Spritesheet/master/keyframes.spritesheet.js"></script>
<div class="spriteContainer"></div>

CSS

.spriteContainer{
    width: calc(850px / 17);
    height: calc(395px / 5);
    background-image: url(http://c2.glitch.bz/items/2012-12-06/grand_ol_grinder__x1_tool_animation_png_1354836354.png);
}

JavaScript

var grind = $.keyframe.spriteSheet({
  name: 'grind',
  rows: 5,
  cols: 17,
  width: 850,
  height: 395,
  count: 5 * 17 - 2
});

var curvey = $.keyframe.circlePath({name: 'curvey'}, [50, 50], 40);

$.keyframe.define([curvey, grind]);

$('.spriteContainer').playKeyframe('curvey 5s linear 0 infinite normal forwards').playSpriteSheet('grind', '3s');