Command line tool for spritesheet and css animations generation
JavaScript CoffeeScript
Switch branches/tags
Nothing to show
Pull request Compare This branch is 11 commits behind giuliandrimba:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Spritefy is a command line tool to generate images spritesheet and css3 animations.

Version 0.5.6


  1. ImageMagick
  2. NodeJS
  3. NPM


npm install -g spritefy

Browser support

  1. Safari 5.1+
  2. Firefox 11+
  3. Opera 11.62+
  4. Chrome 18+

No toy for you IE (Internet Explorer doesn't support css animations)


On OSX, open Terminal, and type:

spritefy -s <sprite_name> -d <images_dir>

Where -s is the name of the sprite and the css3 animation, and -d is the path to the directory which contains the images sequence.

It will generate a folder called sprites, containing the image sprite and the css file with the animation of the sprite, and a folder scripts containing the jQuery plugin to control the animation.


Suppose I have a folder with an image sequence of pngs generated by Adobe Flash or After Effects, and you want to animate it in HTML/CSS.

This folder is in "~/Desktop/animations/img"

I would open Terminal, navigate to the "animations" folder:

cd ~/Desktop/animations

And run the spritefy command:

spritefy -s sprite -d img/

It will generate a folder called "sprites" in "~/Desktop/animations/sprites", containing 2 files: sprite.png and sprite.css, and a folder called "scripts" which contains the jquery plugin to control the css animation.

To test the animation, just create an HTML file, load the css file into it, and assign a class to an element, where the name of the class is the name of the [sprite]-animation, eg:

<div class="sprite-animation"></div>

Compress option

If you want to compress the css file generated to optimize file size, run the command with the -c option, eg:

spritefy -s sprite -d img/ -c

See the Examples

Spritefy jQuery Plugin

You can control the animations using the jQuery plugin "jquery.spritefy.js" generated in the folder "scripts"

Version 0.5


  1. jQuery

Browser support

  1. Safari 5.1+
  2. Firefox 11+
  3. Opera 11.62+
  4. Chrome 18+

No toy for you IE (Internet Explorer doesn't support css animations)






  1. duration:[number] - Total duration in seconds of the animation (for each iteration)

  2. delay:[number] - Delay to start the animation

  3. count:[number] || "infinite" - How many times the animation will run, set "infinite" for infinite loop.

Controlling the animation

After you initialize the spritefy in the element, you will have access to the following methods:

  1. - Plays the current animation.

  2. animation.pause() - Pauses the current animation.


Animation events

You can set callbacks for the following animation events in the options:

  1. onStart - Triggered when the animation starts

  2. onIteration - Triggered for each time the animation plays in the loop

  3. onComplete - Triggered when the animation ends


See the Example