An Introduction to Sprite Animation

Posted 01 October 2015

We always strive to add an element of movement to our websites. Carefully considered fluid animation can elevate a site above the humdrum landscape of templated website design.

The technique for sprite animation is not new, the Victorians taught us how to do it with their zoetrope's, and 8-bit video game designers showed us how to do it in the digital age. At its heart, all we are doing is moving sequentially through a series of images.

Sprite walk cycle animation Sprite walk cycle animation

The making of a spritesheet

It does not matter how you get there, what you need is a one image made up of a number of equally sized frames (sprites). Spritesheets can be made in any application that is capable of outputting to PNG or SVG.

SVGs have the advantage of looking pin sharp on high-resolution screens, but struggle with textures, gradients and complex illustrations. We can often achieve surprisingly small file sizes aided by apps like SVGCleaner and SVGOMG. PNG is a native export option of heavyweight animation apps: Flash & After Effects, allowing us to create fluid animation in environments built to do just that.

The goal is always to create retina ready animations. We have had limited success exporting from After Effects as a series of PSDs and then batch live tracing in Illustrator (via Bridge) to convert to SVG. You can also double size PNGs and scale with JavaScript, both workflows are far from perfect.

Illustrator SVG
Flash PNG
Photoshop PNG
After Effects PNG

Bringing it to life

To achieve a basic looping animation, we assign a background image to a html element and then use JavaScript to adjust its background position over time.

You can do something similar with CSS3 steps() but for complete control and better cross compatibility, JavaScript libraries like Greensocks GSAP are hard to beat.

See the Pen dYNJyR by eighthday (@eighthday) on CodePen.


All we are doing here is assigning a background to an HTML element and fixing the height & width so we only see one sprite at a time.

If you are using more than one animation you can combine spritesheets to reduce HTTP requests.

<div id="mySpritesheet"></div>
#mySpritesheet {
  background: url('my.svg');
  width: 100px;
  height: 100px;


TimelineMax provides a succinct way of defining how we update the background position and gives us excellent control over our animation. This becomes very valuable as complexity increases.

You can control multiple animations within one Timeline, making it possible to sync a series of spritesheets.

First we define the parameters of the animation

var totalFrames = 22;
var frameWidth = 162
var speed = 0.9;

And work out how far we want to scroll the background

var finalPosition = '-' + (frameWidth * totalFrames) + 'px 0px';

Then create new TimelineMax & SteppedEase instances to define how many steps our timeline will take

var svgTL = new TimelineMax() 
var svgEase = new SteppedEase(totalFrames)

Finally we put it all together in a tween'#mySpritesheet', speed, {
    backgroundPosition: finalPosition,
    ease: svgEase,
    repeat: -1,

Taking control

At this stage you might be thinking the end result is not too dissimilar to an animated GIF (and the world does need more animated GIFs). The difference is we can take complete control of our animation; we can pause, reverse, loop sections, even temporarily swap it out with another sprite to create complex movements tied to user interactions.