![](\"http://barbajs.org/images/logo.svg\"){kind=logo}
\n![](\"https://badges.gitter.im/luruke/barba.js.svg\")
\n
\n
\n
![](\"http://barbajs.org/images/1.gif\")
\n![](\"http://barbajs.org/images/2.gif\")
\n![](\"http://barbajs.org/images/3.gif\")
\n![](\"http://barbajs.org/images/4.gif\")
\n![](\"http://barbajs.org/images/5.gif\")
\n\n[View demos](http://barbajs.org/demos.html)\n\n## How it works\n\nBarba.js uses *PJAX* (aka push state ajax) to enhance the user's experience.\n\nThis technique consist in preventing the normal link behavior, changing manually the browser url, and injecting manually the new content in the page. In this way there will be no browser *\"hard refresh\"*.\n\nHere is a walkthrough of what happens when the user clicks a link:\n\n1. Check if the link is valid and eligible for *PJAX*, if yes, prevent the normal browser behavior.\n2. Change the URL using [Push State API](https://developer.mozilla.org/en-US/docs/Web/API/History/pushState).\n3. Start fetching the new page via `XMLHttpRequest`.\n4. Create a **new** [transition](http://barbajs.org/transition.html) instance.\n5. As soon the new page is loaded, barba.js parses the new HTML (taking `.barba-container`) and puts the new content on the DOM inside `#barba-wrapper`.\n6. The [transition](http://barbajs.org/transition.html) instance will take care to hide the old container and show the new one.\n7. As soon the transition is finished, the old container is removed from the DOM.\n\n> Please note, on server side, your pages will need to be served normally. \n> Barba.js works as ehnancement for your website, everything should work normally without Javascript.\n\nIn order to have a better understanding on how Barba.js works I suggest you to read this [article](https://www.smashingmagazine.com/2016/07/improving-user-flow-through-page-transitions/) I wrote for Smashing Magazine.\n\n## Why?\n\nUsing this technique will bring numerous benefits:\n\n* Possibility to create nice transition between pages enhancing the user's experience.\n* Reduce HTTP requests. (why reload the css/js at each page change?)\n* Possibility to speed up the navigation using [prefetch](http://barbajs.org/prefetch.html) and [cache](http://barbajs.org/cache.html).\n\n## Features\n\n- [Pjax](http://barbajs.org/how-it-works.html)\n- [Transitions](http://barbajs.org/transition.html)\n- [Views](http://barbajs.org/views.html)\n- [Events](http://barbajs.org/events.html)\n- [Cache](http://barbajs.org/cache.html)\n- [Prefetch](http://barbajs.org/prefetch.html)\n\n## Installation\n\n**barba.js** supports AMD, CommonJS and Browser global (using UMD). \nYou can install it using npm: \n```\nnpm install barba.js --save-dev\n```\nor just including the script in your page: \n```html\n\n```\nor you can use [cdnjs](https://cdnjs.com/libraries/barba.js): \n```html\n\n```\n\nbarba.js needs to know a little bit about your DOM structure. By default uses this markup structure in your pages:\n\n```html\n