How do I do awesome refreshless page changes like GitHub do?

Question

GitHub seems to be doing something incredible: animated page changes without breaking state. The address bar changes, but the page doesn't refresh and I get animated to the next view.

For example, hit this URL: as3logback/ then hit this URL: as3logback/lib

How in the devil are they doing it!?! It's so cool! Are they using some sort of frame or something serverside?

Answer 1

They have a detailed blog entry up on how it works (HTML5 History API) here: https://github.com/blog/760-the-tree-slider

Answer 2

http://www.asual.com/jquery/address/ is a jquery plugin which supports HTML 5 History API in addition to the traditional hash tag method. This is useful for supporting the transitions in older browsers (via hash tag) while using the HTML 5 method when available.

Answer 3

They most likely use Ajax and HTML5 history.pushSate.

Note that this only works in the most recent browsers like Firefox 4 and Chrome 8 (IE 9 ?). So you would still need a fallback solution like using the fragment identifier as a lot of Ajax driven websites do now (a good example to see the difference is Facebook).