Animations on continuous scroll

Question

Hi,

When exporting a doc with continuous scroll (vertical) there a way for animations to trigger slightly earlier on page load setting?

I'm finding that as you scroll down, animations do not trigger until you hit the middle of the page, where as I'd prefer them to trigger when the user hits either 1/4 in or at the top. Otherwise there's about a second where the page is just blank.

On a side note, is there a way to make animation only play once in the document?

Thanks,

Tom

Answer 1

Would you be able to send us your InDesign file and html5_output for us to troubleshoot? You can send them to us here:

• https://ajarproductions.com/pages/contact.php?category=in5

To make an animation play only once, use the code from the following link. There are a few updated versions of the code at the bottom of that page that have been customized for different ways that the animation may be set up:

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

Comments

I would also be interested in a solution to trigger the animations earlier. Is it possible to make the solution public? Thank you!

Tony

---

Please feel free to send us your files, Tony. I haven't gotten any yet from Tom to troubleshoot. You can also send your files here:

• https://ajarproductions.com/pages/contact.php?category=in5

---

Thanks to another customer who sent us his files, it appears that the delayed animation was related to how images were being loading. 

You can see if this is the issue you're having if after viewing your content the first time, the content appears to play without delay. The reason for an improvement in this case is due to the content being cached.

To make your content play without delay without having to view the content first in order to cache it, you can adjust how the content loads the first time it is viewed.

When you export either by going to in5 > Export HTML5 with in5... or to in5 > Easy Export Wizard... and click the Advanced button, go to the Advanced section of the Export HTML5 with in5 dialog. If Lazy Load Images is selected, then deselect that option.

I would usually recommend using this setting so that images only load once the user goes to a page. However, if the images are getting loading when the page loads, then that loading time can slow down the playing of the animated content. 

You can also improve the loading time of the images by optimizing them. If you have a Gold plan or higher, then you can set Image Optimization in the Advanced section of the export dialog to Enhanced.

• Reduce & consolidate images with in5's Enhanced Image Optimization

If you have a Pro plan or higher, then you can set Image Optimization to Standard.

• Reducing Image File Sizes

---

thank you very much for this solution, it works great!

---

You're very welcome. I'm so glad it helped! :)