3 ms·

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 a

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.

saurik 15y ago
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."
- ComputerGuru 15y ago
  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.
mistercow 15y ago
>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.
johnbhall 15y ago
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 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.

3 ms·

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 a

by jader201 15y ago

saurik 15y ago
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."
- ComputerGuru 15y ago
  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.
mistercow 15y ago
>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.
johnbhall 15y ago
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 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.