jQuery plugin for animating sprite sheets

This project is still in BETA so please contact me with any bugs you find!

View the Project on GitHub barneyfoxuk/jquery.phantascope


A jQuery plugin for animating sprites.


The example below uses this sprite sheet for the character's animation.
Use your arrow keys to interact with the character.


1) Phantascope has only dependancy; jQuery. You can download your own copy of jQuery at http://jquery.com or link to the Google hosted script:

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>

2) Download and include Phantascope in your document as well:

<script src="jquery.phantascope.js"></script>

3) Call the Phantascope function in your document ready function, parsing in the required options for your animation

$(document).ready(function() {
    optionName: value

4) Enjoy super sweet frame based animations on you webpage!


Option Type Default Description
fps Int 24 The number of frames per second the animation should run at.
layout Array [6] An array containing the number of frames on each row of the sprite. The default describes a sprite containing one row of six frames.
animationPoints Array [
The points through which the animation will play. Each point is an array, the first value refering to the column, the second to the row.

This default value will play from the first frame to last frame (based upon the default layout of six frames on one row). You can use as many points as you want, and the animation can play either forward or backwards.

For example. to update the current animation to reverse and play back to the start you would parse these settings: [[1,1], [1,6], [1,1]].
loop Int/String 1 Number of times the animation should loop. For an infinite loop use the string "*".
autoStart Boolean true Whether to play the animation upon initialisation.
resetAtEnd Boolean false When complete reset the sprite to the starting frame.
onComplete Function null Callback fired when the animation is complete.


Method can be called using the following syntax: $('.sprite').spritely("methodName", params). An example of this would be: $('.sprite').spritely("play", {fps: 30, animationPoints: [[6,1],[1,1]]});

Method Parameters Description
play options (object) Start playing the animation from it's current point. You can also update any of the settings of that animation with the options above.
update options (object) Update any of the settings of that animation with the options above.
gotoFrame point (array) Move to the specified frame
pause none Pause the animation
stop none Stop the animation
destroy none Remove all plugin functionality from the element


This project is still in beta so please inform me of any bugs you find here: barneyfoxuk@gmail.com

I hope you enjoy using this plugin!