The Sprite Generator (beta)

Unlimited frames, high FPS, full control.

We all love gif’s, and once upon a time we also had a fling for flash. But both have their limitations. Using sprites, you get animations that work across devices, full alpha transparency and control over the timeline. Try it out yourself!

Upload original graphics

Upload your image sequence and wait for magic to happen!

Select all the images for the sprite (GIFs, PNGs or JPEGs)
Which prefix would you prefer to the generated sprite(s)?

Tool limitations:

  • This tool requires a modern browser (it requires HTML5 multifile support).
  • Currently a maximum of 1000 images may be uploaded at a time.
  • Output format of generated sprites are PNG.
  • There's a render limitation on 3 minutes per job. Longer running jobs will simply fail.


This is just one example of what you can achieve. Go nuts!


This page shows off how a sprite animation may look afterwards, and how it is implemented on your website.

Example 1: Animation as data-attributes


<div class='spriteanim'

Example 2: Same as above with Retina-enabled and pause at frame 23 (24th frame) for 2 seconds


	$('#spriteanim2').spriteanim().on('frame-23-shown', function() {
		window.setTimeout(function() {
		}.bind(this), 2000)

Source code

Grab it while it's hot!


Project GitHub-page   Download source-code

Comments & Wishes

We'd love to hear about your experience, so we can continue to improve on it. Throw any comments or questions you might have. Good or bad - we can take it ;-)