Smooth Page Transitions With JavaScript And PJAX – barba.js

barba.js is a tiny JavaScript library that uses PJAX (aka push state ajax) to create a smooth transition effect between different webpages.

How to use it:

Download and insert the barba.js library into your webpages.

<script src="barba.min.js"></script>

The basic HTML structure for the webpages.

<div id="barba-wrapper">
  <div class="barba-container">
    Your content goes here
  </div>
</div>

Initialize the barba.js on document ready. That’s it.

Barba.Pjax.start();

For advanced usages, please visit barba.js’ official document site for more information.

Changelog:

v2.10.3 (08/12/2024)

• Bugfixes

v2.10.1 (08/02/2024)

• Bugfixes

v2.10.0 (05/10/2024)

• Add setting to cache rendered HTML
• Improve cache storage
• Manage 301 server response
• Limit number of prefetched links
• Allow programmatic barba.history management
• Add support for custom XHR headers
• Add Cache status feature
• Add custom data to barba.history
• Pass the trigger event through hooks
• Bug fixes

v2.9.7 (01/01/2023)

• Simplified API, with tree shaking support and TS definitions
• Hook system for Transitions and Views
• Transition resolution, to declare your transitions and let Barba pick the right one
• Use of data-barba-* attributes, that you can easily customize
• Sync mode, to build cross animated transitions between pages
• Plugin system