Monday, April 21, 2014

A simple Chrome Web App for creating animated GIF files

Recently, it seems animated GIFs have been making a come back and used on social networks like Google+. I thought of making a simple Chrome Web App for creating the animated GIF files (using only Javascript, HTML5 and the gif.js library) without having to upload to a server for processing, i.e. the processing takes place within the web browser only. The resultant WebApp is available here on http://dominoc925-pages.appspot.com/webapp/gifanim/default.html.


Using the WebApp is easy. The following steps show how to create an animated GIF with the default settings.

  1. Simply drag and drop the image frames into the box provided. Or click the Add Image button.

    The Open dialog box appears.

  2. Select one or more image files. Click Open.

    The thumbnails of the selected files appear in the box.

  3. Click Generate GIF.

    The animated GIF file is created.

  4. To save the animated GIF file, mouse right click on the animation. Select Save Image As.



    The Save As dialog appears.
  5. Type in a file name. Click Save.

    The animated GIF file is saved.
Delete or change the order of the image frames
  1. If you want to change the order of the images, simply click on the image thumbnail.

    The Move previous, delete, and Move next icons appear below the thumbnail.

  2. Click Move previous to move the selected image before the previous image frame.
  3. Click Move next to move the selected image after the next image frame.
  4. Click Delete to delete the selected image.
Changing the default settings
  1. If you want to change the default settings, click on Settings on the right pane.


  2. In the Quality field, choose another value.
  3. In the Animation speed field, choose another value.
  4. In the Repeat field, choose another value.
  5. In the Canvas size field, choose another value.
  6. Click Generate GIF to see the effects. 

No comments: