Fully Controllable Sprite Animation Plugin With jQuery - spriteAnimator

File Size: 55.3 KB
Views Total: 2342
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Fully Controllable Sprite Animation Plugin With jQuery - spriteAnimator

spriteAnimator is a simple jQuery sprite animation plugin which enables you to create a fully controllable image sequence animation using background sprites.

How to use it:

1. Download and place the main JavaScript file jquery.sprite-animator.js after jQuery library like this:

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.sprite-animator.js"></script>

2. Insert your image sprites as a background to the target container.

<div id="sprite"></div>
#sprite {

3. Active the sprite animation on page load by calling the spriteAnimator function like this:

var sprite = $('#sprite');
var spriteAnimator = sprite.spriteAnimator({
    cols: 3, // Number of columns in the spritesheet
    rows: 5 // Number of rows in the spritesheet
    run: -1, // -1 = infinite

4. All default global configurations.

  • debug: show debug logging in console (default: false)
  • url: url to spriteSheet, if not set the css background-image will be used
  • cols: number columns in the spritesheet (mandatory)
  • rows: number rows in the spritesheet (mandatory)
  • cutOffFrames: number of sprites not used in the spritesheet (default: 0)
  • top/bottom/left/right: starting offset position
  • startSprite: number of the first sprite to show when done loading
  • onLoaded: callback that will be called when loading has finished

5. Available options for the play method.

var sprite = $('#sprite');
var spriteAnimator = sprite.spriteAnimator({
    // global options here
    play: true,
    delay: 50,
    tempo: 1, // Timescale for all delays
    run: 1,
    reversed: false,
    outOfViewStop: false,
    script: [], // New animation array or named script that has been previously been defined
    lastTime: 0,
    nextDelay: 0,
    currentFrame: -1,
    currentSprite: 1,
    onPlay: null,
    onStop: null,
    onFrame: null

6. Control the sprite animation programmatically with the following API methods.

// play

// reverse direction

// stop

// reset

// next frame

// previous frame

// goto frame 3
sprite.trigger('goToFrame', 3);

// show sprite 3
sprite.trigger('showSprite', 3);

Change log:


  • v1.0.8: Minor cleanup

This awesome jQuery plugin is developed by filidorwiese. For more Advanced Usages, please check the demo page or visit the official website.