EPUB Animation Bugs

[EoinWinston]

Hi,

Set up information: I have a retina-display resolution fixed-width EPUB created in InDesign 14.0.1 on Windows. The EPUB is exported to iBooks and viewed on iPad.

Background: The EPUB is a 100-page interactive e-book style document. The content on each page (text and images) animate into place as the page loads to create a dynamic experience. The animations are mainly 'Fly in from top', 'Fly in from Left' or 'Fade In' set a duration of .35 seconds.

Problem: When testing the EPUB on iPad within iBooks (New iPad with latest IOS installed) the animated content on a number of pages is visible, disappears, and then it animates. Of the 100 pages sometimes the animation bugs appear on anywhere from 10 to 30 pages. Even if I output the same EPUB 2 times, one after the other, and test it on iPad I can get different pages showing the animation bugs.

Things I have tried: From other forums such as Fixed EPUB animations buggy?  posts I have tried to add a delay to the animated elements. I have also tried having the 'Hide Until Animated' checked and unchecked - every combination with no luck. I am also using unique filenames and metadata information for each export in case it was a cache issue.

This is not unique to this particular InDesign File. I can't manage to consistently export any EPUBs with animations to iBooks/iPad without these animation bugs appearing. I have tested on other PCs running the same version of InDesign with the same animation bugs.

[I can't share the file in question as it contains confidential client information]

Thanks in advance,

Eoin

[BobLevine]

The one thing that pops out to me is the .35 seconds. That may not be long enough. Try going to one second (which is the default) and work your way down.

Something else to try as a test would be to export to Publish Online and see how it behaves there.

[EoinWinston]

Hi Bob,

Thanks for the reply and for helping out.

Note: Publish online has always worked fine. So does viewing the EPUB on iBooks on a Mac laptop. (Client needs it to be an offline EPUB however)

I spent a few hours going through the entire InDesign file and set all animations to be 1-second duration with the first animated element on each page to have a hold of .5 seconds - all with 'Hide Until Animated' checked. It worked! No animation glitches this time.

However, the published EPUB feels quite slow now which I guess is a compromise. I wonder was it a combination of the retina resolution content, page quantity and animation speeds being too fast that overwhelmed the iPad memory?

Thanks,

Eoin

[Derek Cross]

It might be worth you having a look at in5, it offers animations (and more) and self contained web apps that will play on almost any device. Export HTML5 from InDesign with in5 - Home

[EoinWinston]

Hi Derek,

Does that allow for an offline and easily shareable web app?

My client is a global pharmaceutical company so content security is essential and it has to work offline and be easily shared with 100's of team members?

Eoin

[Derek Cross]

Yes, but you have to subscribe to in5 and learn how to use it! https://academy.ajarproductions.com/ 

Content can (if you choose) be accessed offline and be easily shared (you don't have to pay further for your productions)

[BobLevine]

The web apps are incredibly easy. You upload the files to a web server, visit the site from Safari on the iPad and just tap the add to home screen button.

Everything else is seamless and if there's an update, and the iPad is online, the app will update in the background.

[EoinWinston]

Hi Bob,

Thanks for the additional information on in5. Looks like a potential avenue moving forward.

Thanks,

Eoin

[Derek Cross]

Eoin – One option you might consider is to ask Bob to produce it for you.

Just a thought.

Derek

[rayek.elfin]

Question on the side regarding performance: what resolution are you exporting at? Are you using InDesign's iPad retina template?

[EoinWinston]

Yep, I used the iPad Retina InDesign template to start with.

Quick update:

When using the new settings (1-second animation duration, checking the 'Hide Until Animated' option and setting the 0.5 second delay to the first animated element) if the user opens the EPUB in iBooks on iPad and immediately opens iBooks' Table of Contents (Thumbnail view) and scrolls down it will cause a couple of pages to error - maybe 2 or 3 page errors.

If I did this with the old settings (0.35-second animation duration, checking the 'Hide Until Animated' option and setting the 0.25 second delay to the first animated element) it would cause 20/30 page errors.

If on the other hand and using the new settings the user goes slowly page-by-page from page 1 to page 100 it will be 100% perfect.

[rayek.elfin]

EoinWinston  wrote

Yep, I used the iPad Retina InDesign template to start with.

In that case: make sure to export to 72ppi in the export settings. Most InDesign epub designers export to 150 or even 300, but that is a mistake: 72ppi in the iPad Retina template means that 1 pixel represents 1 pixel on the iPad screen. Anything over 72ppi only creates far heavier assets, which needlessly tax the iPad's video memory and CPU, and slow down screen drawing - in particular PNG assets with transparent areas.

Also check your epub for empty transparent numbered PNG files, and reduce those to a very small pixel size (for example, 16px). Grouping stuff in InDesign generates these often huge transparent empty files, which still have to rendered on the screen, and take up valuable processing and video ram.

I found that exporting to 72ppi often resolves performance issues with animations as well.