Barba.js: Create Page Transitions Easily

Barba.js is an extremely small and flexible JavaScript library that lets you create transitions across your website’s pages. It can prove helpful in reducing the delay between pages, as well as minimizing the number of HTTP requests.

Overview

In simple words, Barba.js is a dependency free library that can be used to create fluid transitions between different pages. This, obviously, can serve multiple functions, such as ensuring faster loading of pages, and reducing the number of requests and queries made to the web browser, and so on.

Barba.js relies on pushstate, so it can work with almost all the major web browsers. It works via PJAX (pushstate AJAX), which accomplishes the following:

  • Checks if the link is valid (if yes, it prevents normal browser behavior).
  • Changes the URL using pushstate API and then fetches the new page.
  • Once the new page is fetched, Barba.js parses the HTML.

All of this is done on the website-end; on the server side, pages are processed as usual.

barba-js-logo

Mode of Operation

Working with Barba.js is fairly simple. You can install it via npm:

npm install barba.js --save-dev

Or you can just include the script in your page:

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22barba.min.js%22%20type%3D%22text%2Fjavascript%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

Once you have included Barba.js and included your DOM, you can initialize it by calling the relevant function.

If you want Barba.js to ignore certain links, you can add the class .no-barba or just use a custom check to replace the function Barba.Pjax.preventCheck

Verdict

As already mentioned, Barba.js can significantly improve page load times and reduce the number of HTTP requests. This, of course, has one direct advantage: it can enhance the overall user experience, as faster-loading pages mean a faster website, and a better UX for your visitors.

Barba.js manually changes the URL to prevent the web browser’s “hard refresh”. This is a simple method of getting the job done. Plus, it is just 4.4 KB when minified and zipped, so you need not worry about any bloat either.

It is obvious that fluid transitions might not work in every case scenario, and not every website needs them. If, however, you wish to make use of such transitions on your web pages, Barba.js is a pretty nifty JavaScript plugin for this purpose.


Liked what you read?

Sign up for the Code Carbon Newsletter and receive weekly updates about new resources, tools as well as deals and discounts on awesome services.

One email per week; no spam, no nonsense; unsubscribe anytime.