Animator An HTML5 sprite sheet animator

Fork me on Github!

Drag & drop a sprite sheet onto the space below, set the total number of frames in the X and Y direction, and then click animate! If you would like to animate a specific set of frames, you can do so using the frames field in two ways; note that frames are counted from 0, starting in the top left hand corner. If, for example, you would like to start the animation on frame 0 and end on frame 2: write 0,2 in the frames field. If you would like to animate frame 0, then frame 1, then frame 2, and then frame 1 again: write 0,1,2,1 in the frames field. If the frames field is left blank, then the entire sprite sheet will be animated. This demo uses a couple of HTML5 APIs, and it is only compatible with modern browsers.

Number of X-Frames: Number of Y-Frames: Interval(ms): Frames: