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:

03/13/2020

• v2.9.7