About animated GIFs

Google Web Designer lets you use HTML5 content, CSS animation, and video editing tools to build an ad that you can export as an animated GIF.

Animated GIFs are not supported on Linux.

Animated GIF Overview - Google Web Designer

Creating an animated GIF

Animated GIFs should be created using a specific document type in Google Web Designer.

To create an animated GIF:

Select File > New... from the top menu, or Create new file from the start page.
In the left-hand pane, select Animated GIF for the ad type.
Enter a file name.
Select the file location.
Select the dimensions that you want, or Custom in order to specify the width and height.
If you plan on making different-sized versions of this animated GIF, select the Multi-size layout checkbox.
Press OK.

Using a video document

You can also select the Video ad type when creating a new document, then export the video document as an animated GIF during publishing. Some features for video documents are not supported (such as audio) or optimized (such as the list of common sizes for multi-size layouts) for animated GIF export.

Working on an animated GIF

Most HTML5 and CSS tools are available in animated GIF documents, with some limitations. You can also include video tracks, which appear as layers in the timeline.

Timeline

Animated GIFs always use the Advanced mode timeline, where each element is represented as a layer. There is no Events track, as events aren't supported in animated GIFs.

Use the timeline to set the timing of any media or animation. The current time is displayed in the following format: minutes:seconds:frames. The number of frames per second is determined by the frame rate. Google Web Designer supports animated GIFs up to 5 minutes long.

Video can be included in special layers called video tracks that can contain one or more video or image clips. The timeline displays thumbnails of any video and image clips.

Importing media assets

You can add video or image assets to your document by using one of the following methods:

Use the File > Import assets... menu command
Drag an asset from your file system onto the Google Web Designer stage
Drag an asset from the Library panel onto the stage
Use the Import assets button at the bottom of the Library panel (only adds to the Library)

The maximum supported video asset length is 5 minutes.

Supported media codecs

Video assets used in animated GIFs should be encoded using one of the following codecs:

H.264/AVC
VP8
VP9

Some file types that may use the above codecs include .mp4, .m4a, .mov, and .webm. If your video file uses a different codec, Google Web Designer will display an error when you try to import the file.

Document size

To change the dimensions of your animated GIF:

Deselect any elements on the stage. (You can click an empty area of the stage.)
In the Properties panel, use the Size dropdown to select a size, or select Custom to specify the width and height.

Multi-size layout

A multi-size layout lets you can design your animated GIF for different sizes within the same document. If your animated GIF uses a multi-size layout, you should make size changes in the Responsive panel.

Learn more about multi-size layouts.

Frame rate

By default, animated GIFs are set to a frame rate of 5 fps, but will switch to match the frame rate of the first imported video asset.

When you publish your animated GIF, you may have the option to select a lower frame rate in order to export a lower-resolution version. You can also manually adjust the frame rate while you're working on your document. To change the frame rate:

Deselect any elements on the stage. (You can click an empty area of the stage.)

In the Properties panel, use the Frame rate dropdown to select one of the following options:

5 fps
10 fps
12 fps
12.5 fps
15 fps
23.98 fps
24 fps

25 fps
29.97 fps
30 fps
50 fps
59.94 fps
60 fps

Changing the frame rate may disrupt the timing of existing animations or cause choppy playback for video clips with a different frame rate.

Editing video

The following video editing features are available in animated GIF documents:

Set when and how long each video clip plays
Trim clips to use only part of the video source
Split and merge clips
Duplicate clips
Add transitions to clips
Freeze on a video frame

Learn more about working with video clips.

Customizing video appearance

For even greater customization of any included videos, you can use the following features with video tracks:

Variants

Variants let you build multiple versions of an animated GIF with different styles and content, all within a single document. Each variant is exported as a separate GIF file.

Learn more about variants.

Limitations

The following functionality is unavailable for animated GIFs:

Pages
Components
Events and JavaScript libraries
Quick mode timeline
Ad Validator
Hyperlinked text
Ad environments
Saving the document as a template
Previewing the document in a browser
Publishing multiple animated GIF documents at the same time
Publishing to Google Drive, Studio, Display & Video 360, or Campaign Manager 360

Previewing an animated GIF

Stage preview

You can use the timeline controls to preview the document on the stage.

Jump to the first frame of the preview range

Go back to the previous frame

Play preview starting from the timeline playhead

Pause preview playback

Go forward to the next frame

Jump to the last frame of the preview range

Toggle looping for preview playback

Previewing in your browser (using the Preview button) is disabled for animated GIFs.

Preview resolution

You can adjust the preview resolution of videos on the stage by using the Preview resolution dropdown above the timeline.

By default the preview resolution is set to 1/2, but you can reduce it to 1/4 or 1/8 for smoother rendering, or increase it to full resolution.

Export preview

After successfully publishing, the export status dialog will have an option for viewing the finished files. Click Preview to open a preview dialog where you can see each published size and variant of your animated GIF.

You can use the following controls in the preview dialog:

Preview mode - Switch between the following modes:
- Single size
- All sizes (if you published multiple sizes),
- All variants (if you published multiple variants)
Show sizes - Select the size or sizes that you want to view.
Variant - Select the variant
Replay - You can replay individual sizes or variants, or replay them all by pressing this button in the upper right corner.

Publishing an animated GIF

When you're ready to export your document into a GIF file, use the File > Publish menu command or the Publish button.

Currently, you can only publish animated GIFs locally to your file system. Only one animated GIF document can be published at a time.

The export dialog contains options specific to animated GIFs:

Sizes	For documents with multi-size layouts, you can export all or only selected sizes. Each size will be generated as a separate GIF file.
Variants	For documents with multiple variants, you can export all or only selected variants. Each variant will be generated as a separate GIF file.
Frame rate	Select the full or a lower frame rate in fps.
Resolution	Select the full or a lower resolution. The "Size" in the summary in the left-hand panel displays the dimensions in pixels for the current resolution.
Time range	Select the full timeline or the preview range.
Colors	Set the maximum number of colors in a frame (up to 256) and dither percentage. A higher percentage can simulate more colors, but may increase the file size.
Loop count	Set how many times the animated GIF plays. Select the Infinite checkbox to loop continuously.

If you select multiple variants or sizes, each one is exported as a separate GIF file. You can find published files in the folder that you specified in the export dialog.

The export status dialog also includes a Preview option that opens a dialog where you can preview each published size and variant of your animated GIF.

Was this helpful?

How can we improve it?