The story of send of Gmail How does it work?

1.2k Views Asked by At

I am really astonished by the Story of send from Google.

Could anyone tell me how does it work under the hood? Where should I start to learn this set of techniques to build such a nice and great website?

Where should I start? Is it purely HTML5&CSS3?

Here are some discussion on hacker news thread:

  • Very well, that’s how. A quick look reveals that each scene is a section, the assets are linked with data attributes, and the rest is fancy combinations of TweenJS and Three.js animations, coordinated by /assets/js/main.min.js (which also handles the invisible history).

  • It also appears that Swiffy, the SWF-to-HTML converter (http://www.google.com/doubleclick/studio/swiffy/) was used for helping to generate some of those animations.

Still can figure it out how it works, thank in advance!!!

1

There are 1 best solutions below

2
On BEST ANSWER

Guides / Useful sites:
Basics - http://www.w3schools.com/html5/
Advanced - http://www.html5rocks.com/en/tutorials (This is a google project)
Demos - http://html5-demos.appspot.com/
From Apple - http://www.apple.com/html5/

swiffy: I have tried for one of my mobile apps, it worked well. But there is a limit of 1mb for swf file.

storyofsend: yes, Its is using three.js