Quickly generate animated GIFs from HTML.

Using a "selector" (e.g. "p") you select the element which should animated. The "p" selector would select all p elements as candidates. A new GIF frame is created for each selected element

Hello World sample

Assume the trivial HTML below:

    <div>
    <p>&nbsp;</p>
    <p>Hello</p>
    <p>World</p>
    </div>
    

The "p" selector would create a GIF with three frames, one for each p element.

The GIF generator will create the first frame and set the visibility of each p to "hidden" - hiding all elements.

Then it will create a frame for each animated element and set the visibility to "visible" for each of them.

The hello world sample GIF can be seen here:

Selectors

The app is using "standard" jquery selectors, some examples below:

Selector	Description
p	Selects all "p" elements
.myclass	Selects all elements using the "myclass" class
span.foo	Selects all "span" elements using the "foo" class

Span sample

Here is another mini-sample using spans, the selector is set to "span".

     <div style="text-align: center; font-size: 18px; width: 200px; height: 200px;">
        <p>&nbsp;</p>
        <span>This is</span> <span>a lame</span> <span>example</span>
        <span>of some HTML</span> <span>converted</span> <span>to a 
       </span><span>GIF</span>
    </div>
    

Shuffle elements

You can tell the GIF generator to shuffle the elements as show in the sample below.

Individual frames

The GIF generator can be told to show each frame individually, hiding all elements except one.