Spritefy-Build

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

Version 0.5.5

Requirements

1. ImageMagick
2. NodeJS
3. NPM

Installation

npm install -g spritefy-build

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)

Usage

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 in the same directory of the images folder, containing the image sprite and the css file with the animation of the sprite.

Example

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

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-Animation

To have more control of the animation, you could use the jQuery plugin Spritefy-Animation