Fast animation with iOS WebKit | Hacker News Reader

Fast animation with iOS WebKit

joehewitt.com

61 pointsdpearson11 comments

This kind of stuff is par for the course when developing for web iOS, sadly.

To get truly good easing functions, you usually have to write your own (the built-in ones in CSS are limited and rarely look good). Scrolling the page disables ALL transform repainting until the scroll has completed, so if you want to do anything fancy during a scroll you have to disable native scrolling and simulate it with scrollability (or something similar). iOS does not handle images well, especially high-res images (or many small images). Nor, sadly, does it handly opacity transforms well.

There are hacks to get around most of these limitations, but if you are, say, in a situation where you want to animate a series of images in a manner that involves opacity, you're going to get a royal headache. Think that's not that common? It happens more often than you'd think, usually in the form of fancy transitions between UI elements.

Comparing iScroll with Scrollability on iOS5, the former feel like gliding an object on the regular desk (in my case - iPhone 4), while the latter feels like air hockey on steroids. That is one makes scrolling stop too quickly, while the other makes it a bit too long. Both seem perfectly useable, and while scrollability feels a little bit better, I would never be motivated to develop something like this myself, iScroll feels perfectly adequate.

Perhaps a split-test is in order?

I was playing with the new iPhone features page at http://apple.com/iphone/features on iPad running iOS 4 and it has several horizontal scrolling bits that seem to work quite well. swap_view.js is probably responsible for the scrolling but I can't quite figure out how it works, perhaps this could be a viable alternate method?

This is very impressive on iOS 5. Also impressive is the table view demo at http://joehewitt.github.com/scrollability/tableview.html -- the scrolling feels a bit off (it doesn't accelerate quite right), but this is way better than anything else out there.

Joe, why are you so obsessed with making the web look like iOS? Just curious.

Touch scrolling has become a fundamental interaction on mobile devices and I'd like to see it be leveraged more on the web. That has nothing to do with how the web looks.

Have you tried native scrolling in Safari on iOS? It sucks.

I have an iPad. When I push up on a webpage it scrolls. Which part sucks?

The whole page can scroll (on iOS 4), but not individual parts of the page. That's what he's been trying to address, and that's the hard part.

MobileSafari in iOS 5 supports momentum scrolling for scrollable individual parts of the page, here is a blog post about it:

http://johanbrook.com/browsers/native-momentum-scrolling-ios...

fixed positioning is also supported in iOS5.

I am not sure why one would make an iOS5 only script-based scrolling simulation.

And you can't have a fixed-position footer while you scroll around - loads of problems there, not the least of which is that you don't get JS events until the scroll is finished. The only way around it that I'm aware of is to fake all the movement in a fixed-space page, as done here.

Reply on news.ycombinator.com