Fast animation with iOS WebKit

http://joehewitt.com/2011/10/05/fast-animation-with-ios-webkit

by dpearson • 15 years ago

61 11 15 years ago

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.

MatthewPhillips2• 15 years ago

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

endtwist• 15 years ago

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

MatthewPhillips2• 15 years ago

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

joehewitt• 15 years ago

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.

mikhuang• 15 years ago

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?

ender7• 15 years ago

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.

DenisM• 15 years ago

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?

Fast animation with iOS WebKit

Related Stories