barba

# barba.js – [](https://circleci.com/gh/barbajs/barba/tree/main) [](https://coveralls.io/github/barbajs/barba?branch=main) [](http://commitizen.github.io/cz-cli/) [](https://conventionalcommits.org) [](https://lerna.js.org/) [](https://github.com/barbajs/barba/blob/main/LICENSE.md) [](#contributors) [](https://join.slack.com/t/barbajs/shared_invite/enQtNTU3NTAyMjkxMzAyLTkxYWUwZmM1YWQxMmNlYmE0ZjY4NDQxMGUxYjkwYWFlMzEzOWM4OTRhMWRmYTQyYzFlMmQ3OGFmYmI3MWY0OWY) 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](https://barba.js.org/docs/getstarted/browser-support/) for modern browsers* * DOM flexibility - *custom [markup](https://barba.js.org/docs/getstarted/markup/#DOM-structure), [namespaces](https://barba.js.org/docs/getstarted/markup/#Namespace) and `data` attribute [schema](https://barba.js.org/docs/getstarted/markup/#Schema)* * Hook system - *regulars lifecycle [methods](https://barba.js.org/docs/advanced/hooks/) for `Transitions` and `Views`* * Transition resolution - *[rules](https://barba.js.org/docs/advanced/transitions/#Rules) that let Barba pick the right transition* * Sync mode - *indicates whether leave and enter hooks should [“play together”](https://barba.js.org/docs/advanced/transitions/#Sync-mode)* * Page related code - *[custom logic](https://barba.js.org/docs/advanced/views/) attached to a specific `View`* * Modern browser strategies - *keep your site run [as fast as possible](https://barba.js.org/docs/advanced/strategies/)* * Cook like an expert - *improve your [development workflow](https://barba.js.org/docs/advanced/recipes/)* * Built-in utilities - *brought to you with a bunch of [useful methods](https://barba.js.org/docs/advanced/utils/)* * Plugin system - *supplied with [useful plugins](https://barba.js.org/docs/plugins/intro/)* * Wide community - *more than 980+ [amazing developers](https://barba.js.org/docs/getstarted/useful-links/#Developer) can help build your website!* ## Documentation Here you will find the documentation describing **how to use** the library. 1. [Website](https://barba.js.org/) - official Barba website 2. [User guide](https://barba.js.org/docs/getstarted/intro/) - how to install and use the plugin 3. [Lessons, courses and videos](https://barba.js.org/docs/getstarted/useful-links/#Learn) - for in-depth learning 4. [Showcase](https://barba.js.org/showcase/) - selected works made with Barba 5. [Developer API](https://barba.js.org/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](https://barba.js.org/docs/getstarted/legacy/). ## Sponsor If you like this library and want to give some recognition, it is now possible to **become a [Github sponsor](https://www.github.com/sponsors/xavierfoucrier)** 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](.github/CONTRIBUTING.md) before**. Thanks for taking time to contribute to Barba :tada: :+1: ## Contributors
Luigi De Rosa
⚠️
Thierry Michel
⚠️
Xavier Foucrier
⚠️
Marco Grimaldi

Petr TIchy
✅
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