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.
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.