Welcome to the in5 Answer Exchange! This a place to get answers about in5 (InDesign to HTML5) and make requests.
+1 vote
Is there a way to reset a MSO so that it always restarts at the first state rather than when you return to it, it is always at the last state you left it in?
in how_to by (210 points)
edited by
I need to do kind of the same thing. I have an on off toggle for my MSO. I always want it to be in the off state when I forward to a new page.

1 Answer

0 votes
Best answer


This will be the default behavior in v3.6.1. MSOs will automatically reset to the first state, unless you add the following JS:

resetMSOs = false;

Hi Pete,

This can be done by attaching custom .js code using the Resources section of the in5 dialog. Try the following code:


$(document).on('newPage', function(e,data){
 $('.page').eq(data.index).find('.mso > .state').removeClass('active').eq(0).addClass('active').trigger('newState');



Update: Pete sent me a file and I tested and corrected the above code. I noticed that the Slider (Fade in) Page format was used. With this option, the MSO is not resetting until after the page animation. In this case, the following code will work much better, by resetting the MSO before the page is visible:

sliderSettings.onSlideInit = function(event, slider){
    $('.page').eq(slider.targetPage-1).find('.mso > .state').removeClass('active').eq(0).addClass('active').trigger('newState');

Update: This is a better (general) method that will reset the MSO on the previously viewed page, as well as trigger any nested MSO animations on the currently visible page.

$(document).on('newPage', function(e,data){
if(nav.previousPageIndex !== undefined) {
    $('.page').eq(nav.previousPageIndex).find('.mso').each(function(i,el){ toFirstState(el); });
    $('.page').eq(data.index).find('.mso').each(function(i,el){ toFirstState(el); });

by (197k points)
edited by
I'm going to ask a reverse question. Is it possible to go back a page and remember the state it was left on? I have a table of contents with mso for chapters previews but it resets each time I visit.  I'm using liquid layout for having separate html files
Yes, but that's more complex with separate pages. You'll have to
1) listen for the "newState" event and save the data-id attribute and current state to localStorage. You may want the URL in there as a unique identifier as well.

2) When the page loads, retrieve any stored states from localStorage and apply them.
Hi Justin,

On the last question (the reverse question) is this doable in an easier way with the latest version of in5?

I want to go back to a page and remember the state it was left on, so the multi-state doesn't reset to state 1.

Any code suggestions?

I am using the web multi-page export option.
Hi Ed,

Not a simple way with the multi-page. To do so, you'd have to save the MSO state into local storage (or a cookie) and retrieve the state info when the page is loaded.
Makes sense.

Thank you so much Justin.
I'm finding that my MSOs aren't reverting back to their original state when I leave the page. I'm using the latest in5. Is there anything I need to do to make that work?

We'd be happy to take a look at your files to troubleshoot. Can you send both your InDesign file or a sample file that recreates the issue and your html5_output folder to us? You can send them to: