Slower loading on iPad Pro vs desktop or iPhone

Performance
, ,
1

I have a large Hype document of a interactive training tool that allows users to zoom into various elements of a product and then tap on certain features to learn more about each one. In order to zoom into each element, I have a HOME scene and then using sprite sheets for the zoom animation, they can zoom into 7 difference scenes. Each sprite sheet is about 3-5MB with 30 frames each.

The problem I'm running into is a long delay on the zoom in action. So a user taps to zoom into an element, and they only see the last half (if any) of that 30 frame sprite sheet animation. I fixed this by using a .5s crossfade transition from the HOME scene to the next scene which I'm assuming allows the sprite sheet to load.

My big problem here is that this slight delay isn't a big problem on Chrome, Safari, Edge or iPhone, but on my iPad Pro, the delay from tap to zoom in is around 5 seconds, which is way too long for a user to wait.

I have all elements set to preload. I tried the hack of putting all the sprite sheets in the HOME scene, but off screen, to try to get them to preload. But that didn't help.

I'm totally OK with this project taking a longer time to load up front in order for the actual interactive to run smoothly.

Any suggestions on why it's running so much slower on iPad?

Thank you all in advance.

2

This makes sense not from a logical perspective (it doesn't sound like your GIFs are that big) but from just how I've seen iPads perform with a large amount of image data. This might seem counter intuitive, but using an exported video (muted, set to play inline) will perform much better than sprite sheets. By some twist of fate, computers have found ways to optimize the playback of 30fps video over the playback of large images at a lower frame rate. So if you get those same sprite sheets and get them into MP4 videos and preload those in the same manner, the iPad will likely handle these much better. If you can share your document I might have better recommendations.

3

Thanks for the idea. I converted one sprite sheet to MP4, but I'm getting a white flash frame before the video plays. I remember having this problem initially, which is why I went with sprite sheets in the first place.

Also, is there a way to play the MP4 in reverse? Because after the user zooms into an element, I want them to be able to zoom back out to the HOME scene.

4

Here's some work @MaxZieb did on this issue: Playing Video in Reverse - #2 by MaxZieb

Any way you can preload this video on a prior scene? Setting a 'poster' element might be helpful here.