It looks like this is an oversimplification. The graphics and text are doing stuff independently of each other -- this illustrates that the graphics and text are moving together, and they're not.

I would be curious to see how that -- the graphics and text moving independently -- really works.

Of the five sentences on the page, the "oversimplification" aspect is specifically mentioned by one of them. "In the real version, the caption for each slide animates separately and the site degrades well in older browsers."

Not just the caption though - the images too are on separate tiles. Watch carefully, they don't all rotate about the same axis or at the same time.

Hi, it's johnbhall, the creator of the demo. Here's a video by YouTube user louisstamour that shows the exact animation:

http://www.youtube.com/watch?v=8ASoqmyj19A

Apple's code is complex; my demo is simplified because I wanted the source code to focus only on the core idea of the animation -- the main phone stage that rotates and translates. All the other moving parts in the animation follow the same JS pattern as the phone stage: for each of the six states, there's a Slide object that contains JS objects that define the x, y, rotation, opacity, etc. for each element. These properties are applied to their respective elements when that state is transitioned to. See gallery.js.

I hope my 5000-foot view is a good starting point for those interested in exploring Apple's source code for further explanation.

>I would be curious to see how that -- the graphics and text moving independently -- really works.

The text appears to simply be in separate layers which move in from the sides along simple paths and then fade out.

A bit off topic - I find it surprising that the animations don't work in IE9. I'd've thought that the Microsoft user base is one Apple wants to get buying Apple products, and the iPhone is a good entry point.

Well, when Mozilla and others argued that "IE9 is not a modern browser", a lot of other people laughed at them because they thought IE9 doesn't need to support "many HTML5 specs", just a "a few good ones". Now you see the consequence of that. The reality is that IE9 is still about 2 years behind in HTML5 specs adoption, and you can easily tell that from the HTML5test.com site.

Also, IE9 is still a pretty niche browser version. If they were to find an alternative for IE9, then they might as well find one for IE8, which has a much larger market share.

It's really not Apple's fault that this animation won't work in IE until IE 10.

You missed OP's point. He is not bashing IE9 for not being able to run this animations and then blaming Apple for that.

He is wondering why Apple didn't make the animations with something that would also work on IE9 considering that that are the users they want to get.

Spoilers:

~ IE 9 users don't get a broken box that says "upgrade to Safari to see the animation".

~ They get an animation that's supported in IE 9.

~ When they get IE 10 they will probably see the slightly cooler one that Firefox/Chrome/Safari can see because they support it today.

Because it makes the Apple stuff look better, particularly in comparison to the latest of the Microsoft browser products?