# Animated banner ads: motion that helps the message

[Canonical HTML page](https://gradiently.design/guide/animated-banner-ads)

A banner gets a glance from the corner of the eye. Motion can earn that glance, then it has to hand over to a message simple enough to read in a second.

## The short version

- Effective animated banner ads usually follow a short storyboard of three frames: a hook, the value, then the brand and call to action.
- The final frame of an animated banner should work on its own, because many ad networks limit how long or how many times animation may play.
- Common display ad sizes include 300×250, 728×90, 300×600, 160×600 and 320×50 pixels.
- Animated banners are usually delivered as HTML5 bundles or GIFs, and networks set tight file weight limits for both.
- Motion in a banner should draw the eye once and then let the words hold still long enough to be read.

Good **animated banner ads** use motion to catch the eye once, then get out of the way of the message. The dependable structure is three frames: a hook, the value, and an end frame with the brand and a clear call to action that stays on screen. Keep the whole sequence short, make that last frame work as a still ad on its own, and keep the file light, because ad networks limit both how long animation runs and how heavy the file can be.

## The three frame storyboard

Banner ads are seen in passing, beside something the reader actually came for. Nobody waits for a banner to finish. Plan the sequence so each frame makes sense alone and the order tells a tiny story.

1. **Frame 1: the hook** One short line or one striking image. Its only job is to make someone look. "Your desk, calmer." Two to three seconds.
2. **Frame 2: the value** What you offer, in the reader's terms. "Cable trays that fit any desk." Two to three seconds.
3. **Frame 3: the end frame** Logo, the offer in brief and a button shaped call to action. "Shop the range." This frame holds until the ad stops.

Square ad frame with the hook your desk, calmer over a slowly moving gradient

Frame one: a hook in four words over moving colour. Nothing else competes with it.

Square end frame showing a brand name, a short value line and shop the range call to action

The end frame: brand, value and call to action together. If this is all someone sees, the ad still works.

The same storyboard works for social ads, which are usually short videos rather than banners. [Facebook ad design](https://gradiently.design/guide/facebook-ad-design) and [Instagram ad design](https://gradiently.design/guide/instagram-ad-design) cover those formats.

## Timing and loops in animated banner ads

Many ad networks and publishers limit how long animation may run and how often it may loop, and the limits vary. Google Ads, for example, restricts uploaded animated ads to 30 seconds of animation. Check the current specification for every network you buy from, and design so the ad ends on its strongest frame whatever the limit.

| Part | Timing | Rule |
| --- | --- | --- |
| Hook frame | 2 to 3 seconds | Short words, large type |
| Value frame | 2 to 3 seconds | One benefit, not a list |
| End frame | Holds | Brand, offer and call to action, readable as a still |
| Transitions | 300 to 500 ms | Quick and consistent; one style for all frames |
| Whole sequence | Around 6 to 10 seconds per play | Short enough to loop a few times within limits |

A rule of thumb for reading time: if you can't read a frame aloud twice before it changes, give it longer or cut words.

> **Avoid flashing and frantic motion** Rapid flashes are uncomfortable and can be harmful to people with photosensitive epilepsy, and ad networks commonly reject them. Move colour and type smoothly, and never faster than the eye can follow.

## Standard banner ad sizes

Display networks use a set of standard sizes. A campaign usually covers several of them, so design a system rather than one ad: a layout that rearranges for wide, tall and small slots while keeping the same words, colour and motion.

- Medium rectangle: 300 × 250
- Half page: 300 × 600
- Wide skyscraper: 160 × 600
- Leaderboard: 728 × 90
- Mobile banner: 320 × 50

Common display sizes to scale. The very wide and very short slots need fewer words and a simpler end frame.

| Size (px) | Name | What fits |
| --- | --- | --- |
| 300×250 | Medium rectangle | The full three frame story; a good master size |
| 300×600 | Half page | Room for an image above the words |
| 160×600 | Wide skyscraper | Words stacked, two or three per line |
| 728×90 | Leaderboard | One line per frame, logo and button side by side |
| 320×50 | Mobile banner | Hook and button only; the logo may be the hook |

Design the 300×250 first, then adapt. Publishers and networks often ask for double density versions too.

## GIF or HTML5 for animated banners

Most display networks accept animated ads as either GIF or HTML5, a small bundle of HTML, CSS, JavaScript and images. HTML5 gives smoother motion, sharp text at any density and full colour, and suits richer ads. GIF is simpler to produce and accepted almost everywhere, but its 256 colour limit makes gradients band. File weight limits for both are tight, measured in kilobytes rather than megabytes, so check each network's specification.

If you go with GIF, the techniques in [animated GIFs](https://gradiently.design/guide/gif-maker-tips) keep weight down: fewer frames, a palette built from the animation and as little of the frame moving as possible. For the motion itself, consistent [easing](https://gradiently.design/guide/easing) is what separates a polished banner from a jittery one.

## Design rules that make banners work

### Avoid

- Four or five frames of copy
- Small text over busy, fast motion
- The logo only in the first frame
- A different animation style for every element
- An end frame without a clear call to action

### Do

- Three frames, a handful of words each
- Large type over slow, calm colour
- Brand on the end frame that holds
- One transition style throughout
- A button shaped call to action on the last frame

A distinctive background is the cheapest way to be recognised across a campaign. When the same colour field moves behind every frame and every size, people start to associate the motion with you before they read a word. Test variations of the hook rather than the whole ad; [ad creative testing](https://gradiently.design/guide/ad-creative-testing) explains how to run that fairly.

Gradiently suits the social side of a campaign. Design the hook and end frame on a Mark that belongs to you, resize to 1080×1080, 1080×1350 and 1080×1920 in one step on Pro, and export each as MP4. The Mark is rendered for each format, so its calm area still sits behind the words at every size.

## FAQ

### How long should an animated banner ad be?

One play of around 6 to 10 seconds suits most banners. Many networks limit total animation time, Google Ads to 30 seconds for uploaded animated ads, so check each network's specification.

### How many frames should an animated banner have?

Three is a reliable structure: a hook, the value and an end frame with the brand and call to action. More frames usually means more words than anyone will read.

### What are the most common banner ad sizes?

300×250, 300×600, 160×600, 728×90 and 320×50 pixels are among the most widely used display sizes. Start with 300×250 and adapt the others from it.

### Should animated banner ads be GIF or HTML5?

HTML5 gives smoother motion and sharper text and suits richer ads; GIF is simpler and accepted almost everywhere but bands gradients. Both must meet the network's file weight limit.

### What should the last frame of a banner ad show?

The brand, the offer in brief and a clear call to action, laid out so the frame works as a complete still ad if animation stops there.