barba.js [v2]

Invite link to slack channel

Barba.js is a small (7kb minified and compressed) and easy-to-use library that helps you create fluid and smooth transitions between your website's pages.

It helps reduce the delay between your pages, minimize browser HTTP requests and enhance your user's web experience.

Documentation

What's new?

Simplified API
Hook sytem for transitions and views
Transition resolution: declare your transitions and let Barba pick the right one
Use of data-barba attributes
Sync mode
Plugin system
- @barba/router: use of routes for transition resolution
- @barba/css: automatic addition of CSS classes
- @barba/prefetch: automatic pages prefetching (and caching), based on viewport
- @barba/head: update your <head> (coming soon)
- @barba/preset: ready-to-use basic transitions pack (fade, slide, …) (coming soon)

Main changes (TL;DR)

Barba now use data-barba-* attributes:
- data-barba-container for the container
- data-barba-wrapper for the wrapper
- data-barba-namespace for the namespace
2 main methods:
- barba.init() for transitions, views and Barba core settings
- barba.use() for plugins (router, css, prefetch, etc.)
Transitions:
- are plain JS objects
- are declared via the barba.init({ transitions })
- use "hooks" corresponding to animation steps
  - hooks can be synchronous or asynchronous (via this.async() or Promise based)
  - all hooks receive same data argument
- use "rules" to select which transition to use
  - default rules are namespace and custom
  - @barba/router adds route rule
  - they can be combined within from and to properties
Views:
- are plain JS objects
- are declared via the barba.init({ views })
- use a subset of animation "hooks":
  - beforeOnce, afterOnce, beforeLeave, afterLeave, beforeEnter, afterEnter
  - receive the same data argument
Sync mode will start leave and enter transitions concurrently

How it works?

BarbaJS makes your site work like a Single Page Application (SPA), allowing you to create smooth transitions without having to reload the whole site, reducing load delay, browser requests and enhancing user's web experience. Here is a small lifecycle diagram that describe Barba's main concept when navigating between two pages.

Note that using the sync property will end in a different page lifecycle, see https://barba.js.org/docs/userguide/syntax/#Sync-mode

How to contribute

If you want to report a bug or if you just want to request for a new feature/improvement, please follow those instructions before.

Thanks for taking time to contribute to Barba 🎉 👍

Contributors

^{Luigi De Rosa} ^🤔 ^💻 ^📖 ^💬 ^🐛 ^⚠️ ^👀 ^🚇	^{Thierry Michel} ^🤔 ^💻 ^📖 ^💬 ^🐛 ^⚠️ ^👀 ^🚇	^{Xavier Foucrier} ^🤔 ^📖 ^💬 ^⚠️ ^👀 ^🐛	^{Marco Grimaldi} ^🎨	^{Cody Marcoux} ^💬	^Phil. ^💬	^{Giorgio Finulli} ^💬
^Wouter ^🐛 ^💬	^{Mike Wagz} ^🤔 ^💬 ^⚠️	^{Red Stapler} ^✅ ^📹	^{Jérémy Levron} ^💬	^{Nguyen Van Anh} ^💻	^{Daniel Weber} ^💻	^{Jean-Marie Porchet} ^💻
^James ^💻	^Nicholas ^💻	^{Patrick Arminio} ^💻	^{A (from Sicily)} ^💻	^{Pavel Mazhuga} ^💬	^{Daniele De Matteo} ^💬	^{aswinkumar863} ^💬
^BounceIncHQ ^💬	^gordonwes ^💬	^{Evan Fleet} ^💬 ^🐛	^Jörg ^💡	^ZAAK ^💡 ^💬	^{Masahiro Tonomura} ^💡	^CassiusHR ^💬
^{Shane Murphy} ^💬	^{Dylan Reeves} ^💬 ^💡	^{Quentin Neyraud} ^💬	^tortilaman ^💬	^psntr ^💬	^{Kevin Clark} ^💬	^{Tadeas Kosek} ^💬
^{Gustavo de Andrade} ^💬	^Clinton ^💬	^{Dave Stockley} ^💬	^khaiknievel ^💬 ^🐛	^{Francesco Michelini} ^💬 ^💡	^{Domantas Petrauskas} ^💬	^{Kyle Brumm} ^💬
^{Oliver Belmont} ^💬	^{Lu Nelson} ^💬	^{Bram Cordie} ^💬 ^🤔	^{Michael Schouman} ^💬	^{Pascal Garber} ^💬 ^🤔	^{Federico Brigante} ^💬	^{Corey Lee} ^💬
^{Milan Simonovic} ^💬	^{Julien Vasseur} ^💬	^{Maciej Wrona} ^💬	^Terion ^🤔	^{Matt Seccafien} ^🤔	^{Max Schulmeister} ^🤔	^David ^🤔
^{Pierre-Henri Lavigne} ^🤔	^lsbyerley ^🤔	^{Guillaume M.} ^🤔	^{Oscar Otero} ^🤔	^{Nico Prat} ^🤔	^{Marco Solazzi} ^🐛	^atoupet-toki ^🐛
^Josias ^🐛	^{Oksana Romaniv} ^🐛	^{Olivier Guilleux} ^🐛	^{Liroo Pierre ᵈᵉᵛ} ^💻	^{Luis Martins} ^🐛	^Matthew ^🤔 ^💬	^{Simon Goetz} ^🐛
^{Luís Carvalho} ^💬	^{Samuel Berisha} ^💬

gseilheimer/barba