barba.js –

Create badass, fluid and smooth transitions between your website’s pages.

Intro

Barba.js — aka Barba — 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 makes your website run like a SPA (Single Page Application) and help reduce the delay between your pages, minimize browser HTTP requests and enhance your user's web experience.

Features

Barba is user friendly, smart, extensible and futureproof. The library provides a bunch of useful features that will make your website shine like any other website, ever!

• Simplified API - written in TypeScript and works with Promises
• Cross-browser support - progressive enhancement for modern browsers
• DOM flexibility - custom markup, namespaces and data attribute schema
• Hook system - regulars lifecycle methods for Transitions and Views
• Transition resolution - rules that let Barba pick the right transition
• Sync mode - indicates whether leave and enter hooks should “play together”
• Page related code - custom logic attached to a specific View
• Modern browser strategies - keep your site run as fast as possible
• Cook like an expert - improve your development workflow
• Built-in utilities - brought to you with a bunch of useful methods
• Plugin system - supplied with useful plugins
• Wide community - more than 980+ amazing developers can help build your website!

Documentation

Here you will find the documentation describing how to use the library.

1. Website - official Barba website
2. User guide - how to install and use the plugin
3. Lessons, courses and videos - for in-depth learning
4. Showcase - selected works made with Barba
5. Developer API - by developers, for developers

[!NOTE] This guide assumes intermediate knowledge of HTML, CSS, and JavaScript. It is worth mentioning that all code examples use ES6+ syntax. If you are not comfortable with this syntax, we would encourage you to grasp the basics then come back.

In case of emergency, check the "legacy" code example.

Sponsor

If you like this library and want to give some recognition, it is now possible to become a Github sponsor and support this project by sponsoring BarbaJS maintainer on Github. Even if it's a small contribution, you participate in the effort of making open source projects maintained for anyone, and developers to be rewarded for their work/time.

Contribute

If you want to report a bug or request a new feature/improvement, please read the project contributors guidelines before.

Thanks for taking time to contribute to Barba :tada: :+1:

Contributors

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --> <!-- prettier-ignore-start --> <!-- markdownlint-disable --> <table> <tbody> <tr> <td align="center" valign="top" width="14.28%"><a href="http://luruke.com"><img src="https://avatars0.githubusercontent.com/u/61326?v=4?s=100" width="100px;" alt="Luigi De Rosa"/><br />_{<b>Luigi De Rosa</b>}</a><br /><a href="#ideas-luruke" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/barbajs/barba/commits?author=luruke" title="Code">💻</a> <a href="https://github.com/barbajs/barba/commits?author=luruke" title="Documentation">📖</a> <a href="#question-luruke" title="Answering Questions">💬</a> <a href="https://github.com/barbajs/barba/issues?q=author%3Aluruke" title="Bug reports">🐛</a> <a href="https://github.com/barbajs/barba/commits?author=luruke" title="Tests">⚠️</a> <a href="https://github.com/barbajs/barba/pulls?q=is%3Apr+reviewed-by%3Aluruke" title="Reviewed Pull Requests">👀</a> <a href="#infra-luruke" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td> <td align="center" valign="top" width="14.28%"><a href="http://thierrymichel.net"><img src="https://avatars2.githubusercontent.com/u/806883?v=4?s=100" width="100px;" alt="Thierry Michel"/><br />_{<b>Thierry Michel</b>}</a><br /><a href="#ideas-thierrymichel" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/barbajs/barba/commits?author=thierrymichel" title="Code">💻</a> <a href="https://github.com/barbajs/barba/commits?author=thierrymichel" title="Documentation">📖</a> <a href="#question-thierrymichel" title="Answering Questions">💬</a> <a href="https://github.com/barbajs/barba/issues?q=author%3Athierrymichel" title="Bug reports">🐛</a> <a href="https://github.com/barbajs/barba/commits?author=thierrymichel" title="Tests">⚠️</a> <a href="https://github.com/barbajs/barba/pulls?q=is%3Apr+reviewed-by%3Athierrymichel" title="Reviewed Pull Requests">👀</a> <a href="#infra-thierrymichel" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td> <td align="center" valign="top" width="14.28%"><a href="https://xavierfoucrier.dev"><img src="https://avatars1.githubusercontent.com/u/2471223?v=4?s=100" width="100px;" alt="Xavier Foucrier"/><br />_{<b>Xavier Foucrier</b>}</a><br /><a href="#ideas-xavierfoucrier" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/barbajs/barba/commits?author=xavierfoucrier" title="Code">💻</a> <a href="https://github.com/barbajs/barba/commits?author=xavierfoucrier" title="Documentation">📖</a> <a href="#question-xavierfoucrier" title="Answering Questions">💬</a> <a href="https://github.com/barbajs/barba/commits?author=xavierfoucrier" title="Tests">⚠️</a> <a href="https://github.com/barbajs/barba/pulls?q=is%3Apr+reviewed-by%3Axavierfoucrier" title="Reviewed Pull Requests">👀</a> <a href="https://github.com/barbajs/barba/issues?q=author%3Axavierfoucrier" title="Bug reports">🐛</a> <a href="#infra-xavierfoucrier" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td> <td align="center" valign="top" width="14.28%"><a href="http://www.thenerodesign.com"><img src="https://avatars2.githubusercontent.com/u/858150?v=4?s=100" width="100px;" alt="Marco Grimaldi"/><br />_{<b>Marco Grimaldi</b>}</a><br /><a href="#design-markog85" title="Design">🎨</a></td> <td align="center" valign="top" width="14.28%"><a href="https://ihatetomatoes.net"><img src="https://avatars1.githubusercontent.com/u/735672?v=4?s=100" width="100px;" alt="Petr TIchy"/><br />_{<b>Petr TIchy</b>}</a><br /><a href="#blog-Ihatetomatoes" title="Blogposts">📝</a> <a href="#tutorial-Ihatetomatoes" title="Tutorials">✅</a> <a href="#video-Ihatetomatoes" title="Videos">📹</a></td> <td align="center" valign="top" width="14.28%"><a href="https://studio123.ca"><img src="https://avatars0.githubusercontent.com/u/22644154?v=4?s=100" width="100px;" alt="Cody Marcoux"/><br />_{<b>Cody Marcoux</b>}</a><br /><a href="#question-c0mrx" title="Answering Questions">💬</a></td> <td align="center" valign="top" width="14.28%"><a href="https://philiphussak.com"><img src="https://avatars1.githubusercontent.com/u/3285136?v=4?s=100" width="100px;" alt="Phil."/><br />_<b>Phil.</b></a><br /><a href="#question-wiseoldman" title="Answering Questions">💬</a></td> </tr> <tr> <td align="center" valign="top" width="14.28%"><a href="http://www.fnool.com"><img src="https://avatars0.githubusercontent.com/u/5812801?v=4?s=100" width="100px;" alt="Giorgio Finulli"/><br />_{<b>Giorgio Finulli</b>}</a><br /><a href="#question-gfnool" title="Answering Questions">💬</a></td> <td align="center" valign="top" width="14.28%"><a href="https://www.thisisnota.s