How is the github source browser transition done?

Question

For those who don't know what I'm talking about: https://github.com/ThePixelDeveloper/pixel-pagination

When you click on a directory or file github slides the content left to reveal the new content. I understand the loading of the content is done with pjax and I got this part down, but really struggle with the transition. The problem is the new content is loaded into the container I'm moving and so it vanishes off the edge of the screen and doesn't wait for any animations to complete.

My question is: How do I load new pjax content into a new container? After that's figured out all I would need to do is slide the whole container left once the content has loaded to reveal it.

Sinker

Trying to figure out the plugin first :) What am I doing wrong here? – Flatus

Not sure you're doing anything wrong, might be jsfiddle. – Sinker

@Pixel Have you tried $('a').pjax('#new-container') ? – Flatus

Answer 1

It's HTML5, they talk about this on their blog : https://github.com/blog/760-the-tree-slider

Ormazd

Answer 2

The github blog link shows the 'history' method, but not how they do the sliding. About 9 months ago I had to create a left-right slider, and ended up with this (there's a jsfiddle link in there) ...

best approach for jQuery slider with dynamic prev/next content?

... If anyone has a better approach to ajax sliding, I'd love to know it!

Format