How to Create an Animated Web Banner with InDesign & in5

Yes, InDesign. The page layout tool.

InDesign Hidden Gems

While InDesign is known for print layout, it also has extensive interactive capabilities, including:

• An Easy-to-use Animation Panel
• A Timing Panel to create sequenced animation
• The ability to create different Object States that change with interaction
• Interactive actions for Buttons and Form Elements

Just because InDesign was originally conceived as a page layout tool, doesn’t mean you have to create things that look like books.

In this article, I’ll show you how use InDesign’s interactive features and the in5 HTML5 export to create a web banner.

Note that you can also use these techniques to create an animated GIF.

Building the Animation in InDesign

Creating animation with InDesign is easy.

1. Lay out the elements as you would normally.
2. Open the Animation panel (Window > Interactive > Animation).
3. Select an element and apply a preset.

In the image above, the Preset is set to Fade in.

That’s all you have to do to create an animation.

In this case, I applied an animation preset to each element on the page and changed the duration of each to 0.5 seconds.

Creating an animated sequence

Then I used the Timing panel (Window > Interactive > Timing) to arrange the animation in the desired order.

The two rectangles come in together (linked using the button at the bottom of the panel), then the text builds one line at a time.

Making it Responsive (optional)

While InDesign doesn’t have fully responsive capabilities built in, it does have the Liquid Layout panel.

The Liquid Layout panel isn’t sophisticated enough to build entire, responsive web sites (at least not easily).

However, it’s powerful enough to create a responsive web banner, and it’s supported by in5!

You can find the Liquid Layout panel under Window > Interactive > Liquid Layout.

Here are the Liquid Layout settings for the same Text Frame that we looked at above.

Note that it’s pinned to the bottom and the right.

The elements in the top left are pinned to the top and the left.

The big text (“web banner”) in the middle is set to scale with both the height and the width.

So when this browser window is scaled down to a narrow width, the elements respond and look like this:

If you add Liquid Layout settings, just make sure you choose the Liquid Page Format when exporting with in5.

Also note that I used SVG as the Text Rendering option to have text that scales with no degradation.

Update: You can also create Responsive Layouts.

Creating a Borderless Experience

There two steps to making a banner that blends seamlessly with the page.

1. Use a transparent background for the banner.
2. Ensure that no border appears around the content frame.

To create the transparent background, I selected None for both the Background and Page colors in the in5 dialog (File > Export HTML5 with in5…).

The border will be handled in the next step…

Publishing an HTML5 ad to Google Ads

Updated 10/2018: in5 can now directly export to a Google Ad (formerly Adwords) package.

Check out the video below.

Embedding Content in the Page

In the example at the top of the page, I used the in5 Embed Plugin for WordPress to put the banner into the top of this post.

I set the width to 100% (so that the content would scale with the post) and selected Disable Scrolling and Hide border so that no edges would appear around the frame.

This created the borderless banner at the top of this page that blends seamlessly into the rest of the post design.

Looping the Animations

Alternative looping methods

This isn’t the only way to create looping with in5. I detailed another method in this post on creating a looping slideshow.

You can also create user-based looping with a button and that can be done completely from InDesign (no extra code).

To do so, use the Buttons and Forms panel (Window > Interactive > Buttons and Forms) to add a Go To Page action.

Since there’s only one page in this document and the animations are set to play On Page Load, clicking this button will cause the animations to play again.

You can test it in the live example below.

Join the newsletter and get the source files

Sign up now and I'll send you the InDesign file, the JavaScript, and the HTML output for the animated web banner.

Success! Now check your email to confirm your subscription and get the source files for the in5 web banner.

There was an error submitting your subscription. Please try again.

First Name

Email Address

We use this field to detect spam bots. If you fill this in, you will be marked as a spammer.

I'd like to receive the free email course. Yes, send me the files Powered by Kit