Bjorn

Bjorn's GIF-merge

Merge data and SVG into animated GIFs

- a Google Sheets extension -

Merge a SVG template with data from a spreadsheet to create an animated GIF. Each row in the data becomes one frame in the GIF. The SVG templates are designed with a WYSIWYG editor.

Bind spreadsheet data columns to assorted SVG properties, for example use a glow factor column to control the text glow effect for each animation frame.

SVG templates can be fairly complex - use advanced text effects such as drop shadow, glow, inner shadow, water effect and n-th letter effect.

Large library of predefined customizable shapes, such as arrows, callouts, connectors, and flowchart symbols.

Image data (urls) in the spreadsheet data can be displayed using image place holders in the template. Use image clip shapes such as ellipses, round rectangles, n-gons (i.e. octagons) etc to customize the look. Another example of binding a property to element attributes is to use a column for setting the n-gon edge count for the clip shape for each frame in the GIF.

Basic example - using variable text

1. Assume the data in the table below.

Name
Alexandra
Kristofer
Margareta
Fred

2. Assume a SVG template with size 200 x 100 with a placeholder text element

3. You can then merge the table and the template into the animated GIF below.

(The SVG template is using the variable [[data-text]] in the placeholder SVG text element)

Merging attributes

1. You can also bind columns to SVG attributes. Assume the data below.

NameName-Color
Alexandradarkred
Kristoferdarkorange
Margaretayellow
Fredpurple

2. You can bind the color column to the color attribute of the placeholder element.

3. If you merge this data with the template you end up with animated GIF below.

Another sample

There are close to one hundered attributes you can merge. Here is an example just setting the glow factor.

Glow
5
10
15
20

An arrow

Here is an example with an arrow shape, animating the size of the head and the tail.

Arrow-ColorHeadTail
orange3020
darkorange4030
orange5040
darkorange4030

Clip shape

Here is an example with images and animating the clipping shape.

Picture Edge Count
https://www.backlund.org/Images/PictureMerge/Male_1.jpg 5
https://www.backlund.org/Images/PictureMerge/Male_2.jpg 7
https://www.backlund.org/Images/PictureMerge/Male_3.jpg 9
https://www.backlund.org/Images/PictureMerge/Female_1.jpg 11
https://www.backlund.org/Images/PictureMerge/Female_2.jpg 9
https://www.backlund.org/Images/PictureMerge/Female_3.jpg 7

More

Check out this short YouTube video.

Check out screenshots and install from the web store.

Other platforms

Check out this other version for another platform.

Bjorn's GIF-merge - a web app

Support

Note - if you have installed the add-on and the add-on submenu only contains the 'Help' option - PLEASE RELOAD THE DOCUMENT - and the other options will appear.

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.