InDesign can be used to create animated web banners. It has animation and timing panels that allow setting up sequenced animations and object states. Elements can be laid out and animated in InDesign, and its liquid layout panel enables responsiveness. The banner is exported to HTML5 using in5, and JavaScript can be added to loop the animations continuously. A transparent background and no borders ensure the banner blends seamlessly into pages.

1. How Create an Animated Web Banner
with InDesign & in5

2. The banner in this example was made with Adobe InDesign.
Yes, InDesign. The page layout tool.

3. 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

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

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

6. Building the Animation in InDesign
1. Creating animation with InDesign is easy.
2. Lay out the elements as you would normally.
3. Open the Animation panel (Window > Interactive >
Animation).
4. Select an element and apply a preset.

7. In this image, the Preset is
set to Fade in.
That’s all you have to do
to create an animation.

8. Creating an animated sequence
Then I used the Timing panel (Window > Interactive > Timing)
to arrange the animation in the desired order.

9. 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.

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

11. 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!

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

13. 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.

14. 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 the image shown here.

15. Creating a Borderless Experience
There two steps to making a banner that blends seamlessly
with the page.
• Use a transparent background for the banner.
• Ensure that no border appears around the content
frame.

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

17. 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.

18. I set the width to 100% and
selected Disable Scrolling
and Hide border so that no edges
would appear around the frame.
This created the
borderless banner that blends
seamlessly into the rest of the
post design.

19. Looping the Animations
Your in5 output is very flexible. You can append code to
create new functionality.

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

21. 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); } });
});

22. Alternative looping methods
This isn’t the only way to create looping with in5.
I detailed another method in
creating a looping slideshow.

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

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

25. 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.

26. As you can see,
the possibilities are endless and fairly easy to create!

27. View detailed article & get source files:
http://ajar.pro/blog/?p=2803