How to Create an Animated Web Banner with InDesign & in5

Justin | design,HTML5,InDesign,Tutorials | Monday, May 8th, 2017
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.

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.

Making it Responsive

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.

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…

Embedding Content in the Page

In the example above, 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

Your in5 output is very flexible. You can append code to create new functionality.

In the example above, I added a JavaScript file to the output that causes the animation to loop endlessly.

loop file appended in the Resources section of the in5 dialog

Here’s the code inside that file.

$(function(){
var reloadPageDelay = 3000; /*in milliseconds*/
var $replay_btn = $('[name=replay_btn]').on(clickEv, 
	function() { reloadPage() });
var animIDArr = $('.page').attr('data-ani-load').split('id:');
var $lastAnimElem = {};
while($lastAnimElem.length !== 1) {
	var lastAnimID = animIDArr.pop().match(/\d+/)[0];
	var $lastAnimElem = $('[data-id='+lastAnimID+']');
}
function reloadPage(){ nav.currentPage = -1; nav.to(1); }
$lastAnimElem.on('webkitAnimationEnd 
	oanimationend oAnimationEnd msAnimationEnd animationend', 
	function() { if(!$replay_btn.length) { 
	setTimeout( function(){ reloadPage(); }, 
	reloadPageDelay); }
});		
});

I won’t take the time to explain each line of the code here. Let me know in the comments if you want an explanation and I’ll include it in another post.

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

Icon_download

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

Related Articles

5 thoughts on “How to Create an Animated Web Banner with InDesign & in5”

  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!

Leave a Reply

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