The banner above this text was made with Adobe InDesign.

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.
animation panel 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.

animated elements arranged in the Timing panel

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.

Want to learn more about creating animations with InDesign?Check out the Creating Your First Interactive Document video course.

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.

pin settings in Liquid Layout panel

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:

responsive version

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…).

transparent background options

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.

in5 embed WordPress plugin content settings

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

Looping the Animations

Update 5/2018: You no longer need code to loop your content. You can now use Presentation Mode to auto play and loop. As shown in the short video below.

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.

go to page button 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.

As you can see, the possibilities are endless and fairly easy to create!
Would you like to see all the source files for this web banner?
Sign up for my email list and I’ll send them to you immediately.

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.

Powered by ConvertKit

Join the Conversation

  1. Mark says:

    This is 100% my jam right now. I’m totally going to do this later.

    1. Justin says:

      Awesome, Mark!

      Let me know how it goes. 🙂

  2. Warren says:

    Excellent Article Justin.
    Shall give it a try.

    Knowing, ‘Responsive Design’ is not fully achievable with Indesign, however the Liquid Layout panel found in InDesign and its limited settings is not powerful enough for entire websites (“at least not easy” done !) the liquid panel is still great for web banner work that requires Responsiveness and is achievable by exporting from In5.

    I still need to learn how to get the entire website to be Responsive.

    Rendering SVG text maybe key too my needs also.

    Awesome!!!!!!

    1. Justin says:

      Thanks, Warren!

  3. rolling sky game says:

    I would like to create the animates web banner by myself. Thanks for sharing!

  4. Tom says:

    Thanks Justin 👍🏻

  5. awesome post ..i really like this blog ..You can set an animation effect (or sequence of effects) to return to its original state, or repeat. Click the Timing tab, and do one or both of the following: To play an animation effect more than once, select an option in the Repeat list.

  6. pu says:

    I’m trying to create a HTML 5 banner with 4 ‘key frames’, which I’ve set up as 4 pages in my indesign file.
    But when I go tot export, it shows up as 4 individual boxes.

    Does in5 banners have to all be on created on 1 page?

    1. Justin says:

      Hi,
      InDesign doesn’t use keyframes for animation. InDesign has object-based animation:
      https://ajarproductions.com/in5course/?lesson=animation

      If you want pages to play as an animation, you could try using the autoplay feature in Presentation Mode with all page transitions set to None:
      https://ajarproductions.com/blog/2018/05/30/create-awesome-slides-from-indesign-using-in5s-presentation-mode/

      (It’s not really designed to do this though, so no guarantees).

  7. PrintedBanners says:

    You are so creative! I love your article because it is unique and has some really great ideas for banners. In the design section, you mention how to create an animated web banner with InDesign & in5 which proves that even though they’re two very different programs on opposite ends of the creativity spectrum – one can still produce high-quality results when used correctly by following these simple steps.

Leave a comment

Leave a Reply to Tom Cancel reply

Your email address will not be published. Required fields are marked *