Designing a truly responsive digital experience in InDesign can feel like a balancing act, especially when you want to include tall pages, scroll-triggered animations, and traditional page-to-page navigation. If you've ever tried to combine these features in a single project, you’ve likely discovered that InDesign alone can’t do it all.


This article walks you through a powerful workaround using in5. You'll learn how to build a layout with desktop-sized pages — some longer than others — enhanced with scroll-triggered animations and interactive navigation (as opposed to a one-page scroll)that adapts beautifully across devices. It’s a creative solution that we developed in response to real user questions, and it blends multiple in5 techniques to make it all work.


If you're aiming to push your InDesign projects beyond the expected, this guide is for you.


Create separate documents for the scroll-triggered animations

Scroll-triggered animations are automatic in one-page scrolling projects, but not so in single, tall pages. The embedding of another document that contains the animation is what allows it to be triggered when scrolled into focus.

  1. Make a separate document that is intended to include scroll-triggered animation for a page in the main document.
    • If the content is only longer than your intended page size but does not include scroll-triggered animation, then you can either use this approach or create a tall page later when you make the main document:
  2. In this separate document, create as many pages as you need for your scrolling content and for the animation (you may want to change the height of the page with the animation so that it is the only content on that page and make sure the animation's event is set to On Page Load):


  3. Save and export with in5. When you export either by going to in5 > Export HTML5 with in5... or to in5 > Easy Export Wizard... and clicking the Advanced button, use the following settings:
    • In the Basic section of the Export HTML5 with in5 dialog, set
      • Page Format to Borderless Page Scroll (Vertical)
      • Output to Web
    • In the Advanced section of the export dialog, set
      • Mobile Device Viewport Zoom to Use Desktop Scaling and Desktop Scaling to Fill Width
        • Desktop Scaling does disable pinch to zoom, so an alternative would be to change the Mobile Device Viewport Zoom setting to Zoom to Page Width. It works a little differently from Desktop Scaling, so here's more information:
Repeat steps #1-3 for each page that contains scroll-triggered animation.

Create a new document the separate documents will be embedded

  1. Create a new main document for the targeted desktop dimensions.
  2. Draw a rectangle on the page.
  3. Go to in5 > Interactive Widgets > Web Content and in the Web Content dialog, click the button with 3 dots to navigate to the index.html file of the document that you exported in step #3
  4. Repeat steps #6-8 for each separate page you created that you want to embed in the main document.
Layout other pages in this document if they don't need to be embedded.

Make this document responsive

  1. After setting up the pages in the main document (whether embedded or set directly on the page), create alternate layouts with dimensions targeting tablets and mobile
    • Use the Magic Layout Builder (in5 > Build Wizards > Magic Layout Builder) to help with the creation of the alternate layouts (the content in the alternate layouts may need some minor adjusting)


      • It may also help to know that are two options for changing layouts when using responsive layouts:
        1. If you have exactly 2 layouts that are the same size but one is rotated, then in5 will generate the code to adapt to device orientation.
        2. If you have 2 or more layouts of different sizes, then in5 will generate the code to tell the browser to swap layouts at different pixel widths.


  2. Save and export this main document with in5. Use the following settings:
    • In the Basic section of the Export HTML5 with in5 dialog, set
      • Page Format to Slider (Horizontal)
        • Keep Enable Swipe Navigation and/or Show/Back Next Arrows selected if you don't include other buttons for navigation.
    • In the Advanced section of the export dialog, set
      • Mobile Device Viewport Zoom to Use Desktop Scaling and Desktop Scaling to Best Fit.
If you're looking to simply create a one-page scrolling site with scroll-triggered animation and responsive layouts, then check out this premium course on Ajar Academy.