Item — HN Reader

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.

3 comments

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.