---
url: "/bannerify/design/gif.md"
description: "There are two different options for using GIFs in your banner designs, each one works a bit differently, depending on how you'd like to incorporate the GIF into your design. "
---

# Including animated GIFs in your HTML banners

> There are two different options for using GIFs in your banner designs, each one works a bit differently, depending on how you'd like to incorporate the GIF into your design. 

> **Note:** Your GIF layer will need to be included in the main timeline. Any **_nested_ layers containing a GIF won't be rendered** or included in your HTML exports. Embedded animated GIFs will also **not be included in GIF/Video exports** from Bannerify.

> **Tip:** **Flagging transparent GIFs**. By default, your GIF exports won't include transparency. If your GIF does require transparency, please add the word **transparent** anywhere in your Figma layer's name.

## Using animated GIFs as image layers

[Video](/assets/videos/bannerify/design/animated-gif-layer.mp4)

You can drag a `.gif` file inside of any top level banner, which will add it as a Figma image layer.

This method won't allow to include any other content over the top of the animated GIF, however, any additional Figma fills (eg color/gradient overlays) on this frame will also be included in the final `.gif` export.

## Using animated GIFs as background fills on a frame layer

[Video](/assets/videos/bannerify/design/animated-gif-fill.mp4)

Alternatively, you can also drag a `.gif` file from your computer onto a frame layer's **fill**, which will set it as an image fill on the background of the frame. Any additional Figma fills (eg color/gradient overlays) on this frame will also be included in the final `.gif` export.

The advantage of this is that you can then add other Figma layers (text, images etc) inside of the frame on top of your animated GIF, and those will also be included in the `.gif` that gets exported with your HTML banners.