Smooth Page Transitions With JavaScript And PJAX – barba.js

Preview:

Description:

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.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