On Page Load animations to only play once, and remain static after that.

Question

Hi, I am doing tests on a virtual brochure and the animations reload when moving the page, I would like that once loaded they remain static. I export horizontal scrolling for lateral navigation. I tried to copy the code quoted here but it doesn't work better:

Here is the link for my test with the code : 

http://bivouacstudio.com/Devimco-test/index.html

Here is the link with no code:

http://bivouacstudio.com/devimco/Anims-tests-no-code/index.html

Thank you :-)

Answer 1

Scrolling sites (horizontal or vertical) that have animations that trigger On Page Load by default reload when the page reloads.

The code from that post on the Answer Exchange can be used to prevent the animations from replaying; however, the code does not take into account animations that have not finished playing.

There is an approach that can be used to 

• Make the animations play On Page Load
• Allow the user to go to the next page without completing the animation, and
• Have the completed animation show when the user returns to the page

by using

• A multi-state object (MSO) that switches between the initial animation and the finished version
• A Slider (either vertical or horizontal) Page Format
• A button, and
• Custom code that tells the MSO not to reset

Here's how to set it up:

1. Group the animated content on a page (if there are multiple items)
2. Turn the group into an MSO by selecting it and clicking on Convert selection to multi-state object in the Object States panel (Window > Interactive > Object States). (With only one group selected when you create the MSO, InDesign will create 2 copies of the selection as the states.)
3. Keep State 1 animated, although you may need to doublecheck the animation to make sure it's still appearing as it should be
4. Change the contents of State 2 to be the non-animated, completed view of the animation
5. Add a button (it could be an invisible button, a rectangle with no fill and no stroke) and set it in the Buttons and Forms panel (Window > Interactive > Buttons and Forms)
6. Add 2 Actions to the button (the Actions must be in the following order in order to change the state of the MSO on the page before going to the next page):
   • Go to State (set it to the name of the MSO and State 2)
   • Go to Next Page
7. Change the page format to Slider (Horizontal) (or for others who are looking for a similar answer for a vertical site, use Slider (Vertical)), and deselect the following Navigation options in the Basic section of the Export HTML5 with in5 dialog:
   • (deselect) Enable Swipe Navigation
   • (deselect) Show Back/Next Arrows
8. This page format without those options will force the user to click the button (with the necessary actions applied) to advance to the next page and change the MSO state while at the same time looking a lot like the scrolling version
9. Remove the previous JavaScript in the Resources section when you export (if you haven't already)
10. Add the following JavaScript in the Resources section so that the MSOs don't default to State 1 when you return to a page:

resetMSOs = false;

Comments

Thank you very much Myra for your quick response. unfortunately I subscribed to In5 for the continuous scrolling effect. The effect of the slider is not suitable for my client. Could a code as suggested in the previous answer work on a horizontal navigation, in the previous question it look the same issue: 

Attach the following code as a .js file in the Resources section of the in5 dialog (how to attach resources) and it will cause the On Page Load animations to only play once, and remain static after that:

$(document).on('pageRendered',function(){ 
    $('.activePage, .activePage .page-scale-wrap').removeAttr('data-ani-load').find('[data-ani][data-hidestart]').one('webkitAnimationStart msAnimationStart animationstart', function(e){
        $(this).removeAttr('data-hidestart').removeClass('hidden').attr('style', $(this).attr('style')+'display:block !important;');   
    }); 
});

Do you know why this code do not work?

---

The above code prevents the animation from playing again when the page is revisited. It does not address partially finished animations. It also does not set the animations to a finished state.

You may need to hire a web developer to create custom code to address your specific requirements.

---

Our developer updated the JavaScript, so I wanted to post it for anyone who needs it. The updated code does the following:

• Lets the animations play
• Allows a user to advance to the next page without the animation needing to finish
• Lets the user return to the page to see the completed animation

$(document).on('pageRendered', function (e) {
  var currentPage = $('.activePage, .activePage .page-scale-wrap');
  currentPage
    .removeAttr('data-ani-load')
    .find('[data-ani][data-hidestart]')
    .one('webkitAnimationStart msAnimationStart animationstart', function (e) {
      $(this)
        .removeAttr('data-hidestart')
        .removeClass('hidden')
        .attr('style', $(this).attr('style') + 'display:block !important;');
    });
  $('.page[data-name="'+(currentPage.data('name')-1)+'"] .page-scale-wrap')
    .find('[data-ani][data-hidestart]')
    .removeAttr('data-ani')
    .removeAttr('data-hidestart')
    .removeClass('hidden')
    .attr('style', function() {
      return $(this).attr('style') + 'display:block !important;'
    });
});

---

Here's an update to the code above in case your animation uses Hide after animating and/or Hide until animated (the one above only addresses Hide until animated):

$(document).on('pageRendered', function (e) {
  var currentPage = $('.activePage, .activePage .page-scale-wrap');
  currentPage
    .removeAttr('data-ani-load')
    .find('[data-ani][data-hidestart]')
    .one('webkitAnimationStart msAnimationStart animationstart', function (e) {
      $(this)
        .removeAttr('data-hidestart')
        .removeClass('hidden')
        .attr('style', $(this).attr('style') + 'display:block !important;');
    });
  currentPage
    .find('[data-ani][data-end]')
    .one('webkitAnimationStart msAnimationStart animationstart', function (e) {
      $(this)
        .removeAttr('data-hideend')
        .addClass('hidden')
        .attr('style', $(this).attr('style') + 'display:none !important;');
    });
  $('.page[data-name="'+(currentPage.data('name')-1)+'"] .page-scale-wrap')
    .find('[data-ani][data-hidestart]')
    .removeAttr('data-ani')
    .removeAttr('data-hidestart')
    .removeClass('hidden')
    .attr('style', function() {
      return $(this).attr('style') + 'display:block !important;'
    });
  $('.page[data-name="'+(currentPage.data('name')-1)+'"] .page-scale-wrap')
    .find('[data-ani][data-hideend]')
    .removeAttr('data-ani')
    .removeAttr('data-hideend')
    .addClass('hidden')
    .attr('style', function() {
      return $(this).attr('style') + 'display:none !important;'
    });
});

---

Here's an additional update in case you're using buttons with a Show/Hide Buttons and Forms action:

$(document).on("pageRendered", function (e) {
  var currentPage = $(".activePage, .activePage .page-scale-wrap");
  currentPage
    .removeAttr("data-ani-load")
    .find("[data-ani][data-hidestart]:not(button)")
    .one("webkitAnimationStart msAnimationStart animationstart", function (e) {
      $(this)
        .removeAttr("data-hidestart")
        .removeClass("hidden")
        .attr("style", $(this).attr("style") + "display:block !important;");
    });
  currentPage
    .find("[data-ani][data-end]:not(button)")
    .one("webkitAnimationStart msAnimationStart animationstart", function (e) {
      $(this)
        .removeAttr("data-hideend")
        .addClass("hidden")
        .attr("style", $(this).attr("style") + "display:none !important;");
    });
  $(
    '.page[data-name="' + (currentPage.data("name") - 1) + '"] .page-scale-wrap'
  )
    .find("[data-ani][data-hidestart]:not(button)")
    .removeAttr("data-ani")
    .removeAttr("data-hidestart")
    .removeClass("hidden")
    .attr("style", function () {
      return $(this).attr("style") + "display:block !important;";
    });
  $(
    '.page[data-name="' + (currentPage.data("name") - 1) + '"] .page-scale-wrap'
  )
    .find("[data-ani][data-hideend]:not(button)")
    .removeAttr("data-ani")
    .removeAttr("data-hideend")
    .addClass("hidden")
    .attr("style", function () {
      return $(this).attr("style") + "display:none !important;";
    });
});

Answer 2

Attach the following code as a .js file in the Resources section of the in5 dialog (how to attach resources) and it will cause the On Page Load animations to only play once, and remain static after that:

$(document).on('pageRendered',function(){ 
    $('.activePage, .activePage .page-scale-wrap').removeAttr('data-ani-load').find('[data-ani][data-hidestart]').one('webkitAnimationStart msAnimationStart animationstart', function(e){
        $(this).removeAttr('data-hidestart').removeClass('hidden').attr('style', $(this).attr('style')+'display:block !important;');   
    }); 
});

Do you know why this code do not work?