Smooth Page Transitions With JavaScript And PJAX – barba.js

Category: Animation , Javascript , Recommended | January 1, 2023
Author:luruke
Views Total:522 views
Official Page:Go to website
Last Update:January 1, 2023
License:MIT

Preview:

Smooth Page Transitions With JavaScript And PJAX – barba.js

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

You Might Be Interested In:


Leave a Reply