Animate images in HTML5 mobile app (PhoneGap) like

Question

The Google Plus app on the iPhone app has this way of animating images when scrolling down the app. It's difficult to describe. The best way to understand the animation is to download the newest update then scroll through your stream.

In a nutshell, it seems to load the images dynamically as you scroll, then apply some combination of animations (gradual show + scale) to make the image slowly fade into the screen. The animation only takes effect when displaying the image for the first time. In other words, when scrolling up and down, if the image has already appeared in the stream, the animation does not happen.

What's the best way to simulate this animation on a mobile HTML5 app built for iOS devices, specifically contained in PhoneGap? Has anyone done this? The dynamic loading is probably the most interesting/challenging element of this animation because it's so smooth.

Is the dynamic loading an illusion (i.e., do they actually pre-load all the images but animate them in upon scrolling)?

Thanks!

Answer 1

The only thing that I'd say differs from what most others have said is the way that it's animated in. I doubt that in an HTML5 context, especially if using PhoneGap on iOS, that they're using the jQuery Fade-in-out animations. Why? Because webkit-transitions and transforms are so much better/smoother in context of a mobile device - and PhoneGap just uses the WebUI view.

As mentioned, they likely do lazy load the images (preloading, whatever). So I didn't include that part in this fiddle. But here's an example of how to use CSS3 transitions/transforms to simulate the scale and fade in effect. It's super-duper smooth on mobile devices especially when compared to the jQuery fade counter part (it also doesn't freeze up the UI thread).

http://jsfiddle.net/zXBDd/2/

(this fiddle works in webkit browsers)

Here's a version of the scroll thing that works for iOS devices:

http://ijitsudesign.com/demos/scrollAnim/scrollExample.html

Hope this helps!

Answer 2

The concept how this works is:

1. Write code (HTML+JS+CSS) for lazy loading of images
2. Modify the image loading code to combine it with jquery fade-in / fade-out or ease-in / ease-out effects

You can find helpful links & suggestions for lazy loading of images from this link.

Hope that helps!

Answer 3

Have a look at this post JQuery fade-in a div when user scrolls to that div. The answers and Marcel's jsfiddle example should be enough to get you started.