1

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!

dda
  • 6,030
  • 2
  • 25
  • 34
Crashalot
  • 33,605
  • 61
  • 269
  • 439
  • Sounds/Looks like lazy loading through AJAX then using ease-in-out on opacity combined with width, height and z-index – sciritai Jul 03 '12 at 22:40
  • Thanks, @sciritai. How exactly does the lazy loading work? Do we fetch new images as the user scrolls? In Google Plus, it seems like the images are animated in instantly as if the images were pre-fetched already. – Crashalot Jul 03 '12 at 22:45
  • @sciritai, also could you post this as an answer? Then we can give you the points if this solves the problem. – Crashalot Jul 03 '12 at 22:45
  • @dda, good catch on removing "very." – Crashalot Jul 19 '12 at 00:28

3 Answers3

1

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!

Community
  • 1
  • 1
Mahendra Liya
  • 12,912
  • 14
  • 88
  • 114
0

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.

Community
  • 1
  • 1
Bunkered
  • 309
  • 1
  • 3
  • 12
0

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!

J Cole Morrison
  • 808
  • 8
  • 13
  • Thanks, @J Cole. The fiddle didn't work from an iPhone, but I think this is the right approach. Re lazy loading, does that just mean images are loaded via AJAX after the page loads (i.e,. page loads with no images initially but an AJAX call kicks in after the page renders to fetch all images)? Or does it mean the images are loaded one-by-one as the user scrolls? – Crashalot Jul 18 '12 at 22:01
  • Hey Crashalot! First off the Lazy Loading means it's not loaded until it's absolutely needed. So when the scroll hits it, it would then load it. As for not working on iPhone, iOS doesn't handle anything "iframe" very well, so here's a direct example of the scroll thing with touches that works on iOS: http://ijitsudesign.com/demos/scrollAnim/scrollExample.html – J Cole Morrison Jul 18 '12 at 23:45
  • Thanks, J Cole. We have read conflicting information about whether it's advisable to bind to the scroll event. Is this something we should be worried about? – Crashalot Jul 19 '12 at 00:26
  • Here's the SO question in case you want points for an answer: http://stackoverflow.com/questions/11551379/how-to-listen-or-bind-to-scroll-events-in-web-app-for-iphones-built-in-phonegap – Crashalot Jul 19 '12 at 00:27