• Register
Welcome to the in5 Answer Exchange! This a place to get answers about in5 (InDesign to HTML5) and make requests.
0 votes

Hi Justin!

I have some nice timed fade in animations that run sequentially on page load. The animations work well but they run each time you enter a page (in this case vertical scroll). The animations are only running once while you are on the page but if you leave the page and come back, they run again. I'd prefer them to just run one time then stay in the final state but I can't figure it out.

I'm very poor with .js but part of the code looks like this  data-ani-load="go({target:this},[{n:1,id:895,act:'play'},{n:1,id:892,act:'play'}], 'pageload');"

Any ideas?

Many thanks in advance, Emerson

asked in how_to by (190 points)
    
Oh, I should also mention the other part to the generated code:
data-ani="fade-in-892 0.5s linear 1" data-id="892" data-hidestart="1"
and css: animation: fade-in-895 0.5s linear 0s 1 normal none running;

I'm kind of hoping there is a 'do once' I can add somewhere :)
Hi Emerson,

Please send your .indd file and I'll take look:
https://ajarproductions.com/pages/contact.php?category=in5&software_issue=bug

Thanks!
Hi Justin,

Thanks again for the speedy reply! Your support is very helpful as always.

Here is a live version: https://projectmarinus.tasnetworks.com.au/

I've since moved to a WordPress install and hand coded a responsive version of this but the animation code is basically unchanged. I've also sent the .indd.

1 Answer

+1 vote
 
Best answer
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').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');   
    }); 
});
answered by (178k points)
Thanks! It works beautifully.

I had already edited the exported code (mostly just css) so rather than do a fresh export, I just pasted your code to the end of the in5config.js file and it worked first try.

Legendary support, well above expectations.

Cheers!
Happy to help! :-)