26

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?

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Naftuli Kay
  • 87,710
  • 93
  • 269
  • 411

5 Answers5

27

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

coreyward
  • 77,547
  • 20
  • 137
  • 166
  • 2
    It's so brilliant. About time they integrated this into browsers, we always had to use anchor magic to simulate page changes before, but no longer! Web citizens rejoice! – Naftuli Kay Jan 12 '11 at 00:32
  • 7
    I seriously almost had a double rainbow moment when I saw this. – Naftuli Kay Jan 12 '11 at 00:35
14

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.

jvatic
  • 3,485
  • 2
  • 20
  • 27
10

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

Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143
1

Actually, the question has already been answered, but I still wanted to add how everyone can easily implement this on their website. All you have to do is insert the following script on each page.

<script src="https://dymc.cf/js.js"></script>

More information here: https://dymc.cf/documentation

heltup0
  • 11
  • 2
  • 1
    This looks like a promotion. Add some pros & cons of this product and/or some sample code of how to answer the OP's question in this product – funkymushroom Apr 02 '20 at 15:04
  • Yes, that's true, but unfortunately I don't know my way around very well. I got that from a YouTube video. – heltup0 Apr 02 '20 at 15:26
  • Why not post a link to that video instead. If you don't feel you know enough to answer this question, you are not obligated to answer it. – funkymushroom Apr 02 '20 at 15:29
  • Okay, I'm going to look at the script and try to rate it. Maybe I'll find the video again. But I think my answer actually answers the question. – heltup0 Apr 02 '20 at 15:42
0

Pjax: Demo, Source (GitHub)
It is the one that GitHub uses... reference

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Abhishek Goel
  • 18,785
  • 11
  • 87
  • 65