Responsive Sprite Animations with ImageMagick and GreenSock

CSS Sprites are not new. Since being popularized on A List Apart in 2004, the humble sprite has become a staple technique in many a web developer’s toolkit. But while the speed benefits afforded by sprites are well-understood, their uses in modern web animation are rarely discussed. The principle remains the same: combine multiple images into a single ‘master’ graphic, of which only selected portions are displayed at a time.

In this article, we’ll explore an easy way to create responsive CSS sprite animations that are lightweight, mobile-friendly, and even interactive. You don’t need any special graphics software, just a bit of CSS and JavaScript know-how. Let’s get started.

Building A Sprite

Sprites originate from the world of video games, so we’ll pay tribute to their heritage and animate Ryu from Street Fighter. Needless to say, all artwork belongs to Capcom.

We need to combine each frame of our animation into a single image. There are dozens of tools out there to aid with the creation of sprites, many of which will even generate an accompanying stylesheet for you. Compass’s built-in spriting features are immensely powerful, and SpritePad is a good example of a web-based generator. For our purposes, however, a simple command-line approach works fine.

ImageMagick, the ‘swiss army knife’ of image processing, is a free and open-source image manipulation tool that’s perfect for automating tasks that could become laborious, such as combining images. ImageMagick is also available for just about every operating system. Mac users can install it via Homebrew, Windows adherents can download an executable installer from the official website, and Linux devotees probably don’t need me to explain anything.

Save the identically-sized frames of your animation in a folder as a sequence of PNGs. Break out a command-line terminal, navigate (cd) to the directory where your images are saved, and execute the following command:

[code language="bash"] convert *.png -append result-sprite.png [/code]

This command instructs ImageMagick to vertically concatenate all the .PNG files in our directory (since ‘*’ is essentially a wildcard) into one complete sprite called “result-sprite.png”. This is the graphic that we will apply as a background-image in CSS to the element we want to animate, altering its position to cycle through each frame in sequence.

Continue reading %Responsive Sprite Animations with ImageMagick and GreenSock%

by Tom Bennet via SitePoint