Barba.js is a powerful JS library that help you integrate pjax to your website easily. It brings much benefit to your website, such as reducing page transition time, unique page transition animation and so on. In this article, we explain the basic implementation of Barba.js. See the article below if you like to know the pros and cons by Pjax.
Previous: What’s pjax and why should we use.
Next: How to Add Page Transition Animation using Barba.js
Objective
The objective is to develop page transition like gif animation below.

Sample HTML and JS
You can see the sample html and js from links below.
See Demo See Code
HTML Coding
Here is the html code.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Pjax Demo 1</title> </head> <body> <div class="header">Header</div> <div class="container"> <div id="barba-wrapper" class="main"> <div class="barba-container"> <div class="page1"> <p>Main</p> <p><a href="./page2.html">Go to page 2</a></p> </div> </div> </div> <div class="sidebar">Sidebar</div> </div> <div class="footer">Footer</div> <script src="//cdnjs.cloudflare.com/ajax/libs/barba.js/1.0.0/barba.min.js"></script> <script src="./pjax.js"></script> <link rel="stylesheet" href="./pjax.css" /> </body> </html> |
Define and Set container area.
.barba-container
class to the wrapper element, for instance, add .barba-container
to main area in the figure.
Include Barba.js
Include Barba.js at the bottom of your page.
1 | <script src="//cdnjs.cloudflare.com/ajax/libs/barba.js/1.0.0/barba.min.js"></script> |
Now, Html is ready. Move on to JS coding.
JS Coding
1 2 3 4 5 6 7 8 9 | (function (Barba) { document.addEventListener("DOMContentLoaded", function (event) { console.log('pjax start'); // Barba init Barba.Pjax.start(); // Barba prefetch init Barba.Prefetch.init(); }); }(Barba)); |
Initialize Barba.js
1 2 3 | document.addEventListener("DOMContentLoaded", function(event) { Barba.Pjax.start(); }); |
Initialize Barba.js after DOM is ready.
Tips: Difference between DOMContentLoaded and load.
The DOMContentLoaded event is fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading (the load event can be used to detect a fully-loaded page).
Reduce Your Web Page Transition Time by Prefetch
When Prefetch is enabled, we can start prefetching the new page on the user’s mouseover/touchstart on the link. Since there is a 100-300ms delay during the user hover and the click, it can be used for prefetching new page. You have to be careful when you activate this function because it usually gives more traffic on your server.
But more than 97% of all websites don’t have enough visitors to crush their server. So don’t worry.
1 | Barba.Prefetch.init(); |
Summary
This time we explain how to integrate Barba.js to your website.
In next article, adding page transition animation to it!
How to Add Cool Page Transition Animation by Pjax(Barba.js)[Demo and Code attached]