This is a unique combination of features that a couple of users have inquired about, so we've created this article to help with the process.


If you'd like to create a publication that has
  • A targeted size for desktop
  • Some pages that are longer than the targeted size
  • Scroll-triggered animation
  • Navigation between pages (as opposed to a one-page scroll)
  • Responsive pages for tablets and mobile

...Then here is an approach you can use that combines the techniques for 
  • Scroll-triggered animations using variable page sizes
  • Embedding output from another document using the in5 Web Content interactive widget, and 
  • Making a responsive layout.

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.


Create separate documents for the scroll-triggered animations


  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.