Sprite animations on the web
So what are sprites and why would you care about them as a web developer? A definition of sprites are that they’re compositions of independent visual objects, usually frames of animation in our case. If you’ve played video games from the pre-3D graphics era, most of the character and avatar animations in those games would have been sprites. All the animation frames for a character on screen would have been composited into one large sprite sheet.
An example would be the coin from Mario below. Its sprite sheet has all the animation frames collected in a sequential row in one image file.
By placing a window over the sprite sheet so that shows only one animation frame and then shifting the sprite sheet so that the next frame is shown in the window, this creates the effect of an animated character.
Using just HTML and CSS you can animate a sprite sheet. You would set the sprite sheet that you want to use as a background image to an HTML element. You would then size that element to show a single animation frame and position the sprite sheet background image so that it’s showing the starting frame you want.
A CSS keyframe animation would then be used to animate and shift the background sprite sheet image so that the ending animation frame is showing. When running the keyframe animation in the element with the sprite sheet background, you would then use the step() function to break up the keyframe animation into a number of discreet steps, depending on how many frames you have going from your start to end animation frames. For example if you had 4 frames you would use step(4).
The step() function prevents the transitions that we would normally want with keyframe animations, but would ruin the instantaneous frame switching needed for sprite animation. It is also important to ensure that the frames in your sprite sheet are all equally spaced, since the step() function is essentially equally dividing the space between the start and end defined in your keyframe animation.
Guil Hernandez has an excellent article on this. I’ve also created a simple example on codepen below:
If you are using a framework like React, there are libraries such as React Sprite Animator and React Responsive Spritesheet that streamline the process I described above by doing all the work of setting up a keyframe animation for you.
So when and why would you want to use sprites and sprite animations on your website? One main reason is that sprites can reduce the number of HTTP requests needed to load all the assets on your site, since your assets are collected into a single sprite sheet.
Sprite animations can be fairly similar to gifs, but sprites offer some advantages because they can essentially be made in any image format (jpeg, png, svg …), so they are not restricted to the 256 colour limit of gifs. Sprites also allow for more interactive animations, as you can set the animation to start and/or stop on a user action such as cursor hover or click. Sprites do require more effort in setting up a sprite sheet, which can get prohibitive if there are many animations on a site.
I hope this blog post has been informative and helped you put another tool in your web development toolbox.
