Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/barbajs/barba
Create badass, fluid and smooth transitions between your website’s pages
https://github.com/barbajs/barba
animation barba barbajs css fluid library page page-transitions plugin-system prefetch router single-page-application smooth spa transition
Last synced: 6 days ago
JSON representation
Create badass, fluid and smooth transitions between your website’s pages
- Host: GitHub
- URL: https://github.com/barbajs/barba
- Owner: barbajs
- License: mit
- Created: 2015-11-12T20:08:53.000Z (about 9 years ago)
- Default Branch: main
- Last Pushed: 2024-12-02T22:33:28.000Z (about 1 month ago)
- Last Synced: 2025-01-02T05:27:51.094Z (10 days ago)
- Topics: animation, barba, barbajs, css, fluid, library, page, page-transitions, plugin-system, prefetch, router, single-page-application, smooth, spa, transition
- Language: TypeScript
- Homepage: https://barba.js.org/
- Size: 29.8 MB
- Stars: 11,706
- Watchers: 134
- Forks: 473
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
- Code of conduct: .github/CODE_OF_CONDUCT.md
- Authors: AUTHORS
Awesome Lists containing this project
- awesome - barbajs/barba - Create badass, fluid and smooth transitions between your website’s pages (TypeScript)
- awesome - barbajs/barba - Create badass, fluid and smooth transitions between your website’s pages (TypeScript)
- StarryDivineSky - barbajs/barba
- awesome - barbajs/barba - Create badass, fluid and smooth transitions between your website’s pages (TypeScript)
- awesome - barbajs/barba - Create badass, fluid and smooth transitions between your website’s pages (TypeScript)
README
# 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.
[](https://barba.js.org/)
## 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
💬 🐛
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
💬
Anderson Leite
💬 🐛
Jay Collett
💬 🐛
Tim Gates
🐛
Nicolas Cusan
💬 🐛 💻
Gerald Nako
🐛 💻
## License
The project is developed under the **MIT** license:
- **Permissions**: This software and derivatives may be used for commercial purposes, you may distribute this software, this software may be modified and you may use and modify the software without distributing it.
- **Conditions**: Include a copy of the license and copyright notice with the code.
- **Limitations**: Software is provided without warranty and the software author/license owner cannot be held liable for damages.
Read the [full license](LICENSE.md) for more information about your rights.