Don't replay On Page Load animations when returning to a page

Question

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

Comments

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.

Answer 1

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;');   
    }); 
});

Comments

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! :-)

---

Code above has been updated to account for changes in v3.6.

---

Wondering if this can be done on certain pages only...?

---

Yes, it's more complicated, but could be done. You'd have to filter the .activePage page element (then find the .page-scale-wrap inside).

You can use .eq or [data-name="2"] on the page element. I can recommend a web developer to help with this.