This is incredible.
The “phone stage” (blue-bordered box) contains all 6 “slides” of the animation sequence and has a transition css property with a duration and timing function (a cubic bezier curve). For the phone stage to cycle from one slide to the next, its css transform property is updated with new translate and rotate values. At the end of the cycle, the phone stage’s transition duration is temporarily set to 0ms while slide 6 resets to slide 1.
The demo will only work in recent versions of Safari, Chrome and Firefox. The functional version on the Apple website also includes a caption, that animates separately. Of course, this whole page degrades in older browsers well, but seeing this in action is inspiring!
[via John B Hall]
Brendan says
Great insight! I was impressed by that animation on the Apple site a couple of weeks ago and wondered how it was done.
Its great to see stuff like this not relying on Flash!
Eric Dye says
No kidding! It is amazing to see how this works compared to how it looks on the user end.
Eric J says
Very cool! I think we can all agree that Apple has some very talented programmers.
Eric Dye says
Very talented everybody 😉
matt renfro says
this is awesome! How can find the original code you used to make this demo?
Brendan says
It looks like the demo was created a gentleman named John B Hall. That demo has his contact information on it.