Create a Frame-by-Frame Animation Using a Sprite Sheet with JavaScript

In this article I’m going to show you how to make an animation out of a Sprite Sheet using JavaScript, just like the GIF above (no libraries or external tools).

Note: I didn’t create the Sprite Sheet used in this article, and unfortunately I couldn’t find the name of the person who created it. Also, it’s only used for educational purposes.

First things first; grab your coffee and let’s begin…

What is a Sprite Sheet?

Sprite Sheet is just an image (2-dimensional bitmap) that has all the frames required for a set of animations.

Or, an image that consists of several smaller images (sprites) and/or animations.

See the image below

Usually, every single small image in the Sprite Sheet is called Frame, and looking at the image above, you can see the walking animation cycle starts at the first row from the the second frame till the last frame in the first row.

Also, using a Sprite Sheet to do animation in Video games (or any other media) can improve the performance, as we don’t need to load…