The playground
Web apps
Bjorn

Bjorn's HTML-2-GIF

HTML 2 GIF converter

- a web app -

Quickly generate animated GIFs from HTML.

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
pSelects all "p" elements
.myclassSelects all elements using the "myclass" class
span.fooSelects 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.

More

Check out this short YouTube video.

Launch the app.

Other platforms

Check out this other version for another platform.

Bjorn's HTML-2-GIF - a Google Slides extension

Safari issues

This app is using a feature (create images from HTML markup) that is NOT AVAILABLE in the Safari browser. With that said, you can launch the app in Safari but you can't use this critical feature. Sorry...

Sig Pic Support

Use this app to design a sig pic. A sig pic (short for signature picture) is an image you can quickly insert into the Gmail new message window using the add-on Bjorn's Sig Pics.

Support

Please report bugs here or reach out 2 me with questions @ support@backlund.org.

Got an idea for a new feature/app/add-on? Use the suggestions portal.

Follow me at Instagram @bjornsplayground and check out more videos at my YouTube channel.

You can view our privacy policy here.