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.
- Lay out the elements as you would normally.
- Open the Animation panel (Window > Interactive > Animation).
- 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.
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.
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.
- Use a transparent background for the banner.
- 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.
Sign up for my email list and I’ll send them to you immediately.
Join the newsletter and get the source files
This is 100% my jam right now. I’m totally going to do this later.
Let me know how it goes. 🙂
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.
I would like to create the animates web banner by myself. Thanks for sharing!
Thanks Justin 👍🏻
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.
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?
InDesign doesn’t use keyframes for animation. InDesign has object-based 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:
(It’s not really designed to do this though, so no guarantees).
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