Gif Scratcher

A lightweight (~4kb minified) jQuery plugin that allows you to scratch GIFs.

Download GitHub


Move your mouse over the GIF to scratch it. (GIF by Julien Douvier)


Add the first image in your animation to your HTML file.

<div id="target" class="target">
  <img src="animation-first.jpg">

Then add the jQuery magic.

  sprite : 'animation.jpg',
  frames : 10

Settings available.

  sprite      : string  // Image sprite
  frames      : int     // Number of frames in sprite
  interaction : string  // 'hover'
                        // 'drag'
  auto        : boolean // Autoplay
  speed       : int     // Autoplay speed
  cursor      : boolean // Add custom cursor


To extract every single frame from an animated GIF as individual JPEGs and create a sprite you can use ImageMagick in the terminal.

Install ImageMagick (OS X): brew install imagemagick

To extract the frames run: convert FILENAME.gif -coalesce %02d.jpg

To create the sprite run: montage `ls ??.jpg` -tile NUMBER_OF_FRAMESx1 -geometry 500x284 FILENAME.jpg