Barba.js

Create badass, fluid and smooth transition between your website's pages.
GitHub
11.6k
Created 9 years ago, last commit 2 months ago
24 contributors
1.02k commits
Stars added on GitHub, month by month
10
11
12
1
2
3
4
5
6
7
8
9
2023
2024
Stars added on GitHub, per day, on average
Yesterday
-1
Last week
+0.9
/day
Last month
+1.3
/day
Last 12 months
+1.5
/day
Package on NPM
Monthly downloads on NPM
10
11
12
1
2
3
4
5
6
7
8
9
2023
2024
README

barba.js – Stability CircleCI Coverage Status Commitizen friendly Conventional Commits lerna License All Contributors Slack workspace

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

barbajs

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!

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 🎉 👍

Contributors

Luigi De Rosa
Luigi De Rosa

🤔 💻 📖 💬 🐛 ⚠️ 👀 🚇
Thierry Michel
Thierry Michel

🤔 💻 📖 💬 🐛 ⚠️ 👀 🚇
Xavier Foucrier
Xavier Foucrier

🤔 💻 📖 💬 ⚠️ 👀 🐛 🚇
Marco Grimaldi
Marco Grimaldi

🎨
Petr TIchy
Petr TIchy

📝 📹
Cody Marcoux
Cody Marcoux

💬
Phil.
Phil.

💬
Giorgio Finulli
Giorgio Finulli

💬
Wouter
Wouter

🐛 💬
Mike Wagz
Mike Wagz

🤔 💬 ⚠️
Red Stapler
Red Stapler

📹
Jérémy Levron
Jérémy Levron

💬
Nguyen Van Anh
Nguyen Van Anh

💻
Daniel Weber
Daniel Weber

💻
Jean-Marie Porchet
Jean-Marie Porchet

💻
James
James

💻
Nicholas
Nicholas

💻
Patrick Arminio
Patrick Arminio

💻
A (from Sicily)
A (from Sicily)

💻
Pavel Mazhuga
Pavel Mazhuga

💬
Daniele De Matteo
Daniele De Matteo

💬
aswinkumar863
aswinkumar863

💬
BounceIncHQ
BounceIncHQ

💬
gordonwes
gordonwes

💬
Evan Fleet
Evan Fleet

💬 🐛
Jörg
Jörg

💡
ZAAK
ZAAK

💡 💬
Masahiro Tonomura
Masahiro Tonomura

💡
CassiusHR
CassiusHR

💬
Shane Murphy
Shane Murphy

💬
Dylan Reeves
Dylan Reeves

💬 💡
Quentin Neyraud
Quentin Neyraud

💬
tortilaman
tortilaman

💬
psntr
psntr

💬
Kevin Clark
Kevin Clark

💬
Tadeas Kosek
Tadeas Kosek

💬
Gustavo de Andrade
Gustavo de Andrade

💬
Clinton
Clinton

💬
Dave Stockley
Dave Stockley

💬
khaiknievel
khaiknievel

💬 🐛
Francesco Michelini
Francesco Michelini

💬 💡
Domantas Petrauskas
Domantas Petrauskas

💬
Kyle Brumm
Kyle Brumm

💬
Oliver Belmont
Oliver Belmont

💬
Lu Nelson
Lu Nelson

💬
Bram Cordie
Bram Cordie

💬 🤔
Michael Schouman
Michael Schouman

💬
Pascal Garber
Pascal Garber

💬 🤔
Federico Brigante
Federico Brigante

💬
Corey Lee
Corey Lee

💬
Milan Simonovic
Milan Simonovic

💬
Julien Vasseur
Julien Vasseur

💬
Maciej Wrona
Maciej Wrona

💬
Terion
Terion

🤔
Matt Seccafien
Matt Seccafien

🤔
Max Schulmeister
Max Schulmeister

🤔
David
David

🤔
Pierre-Henri Lavigne
Pierre-Henri Lavigne

🤔
lsbyerley
lsbyerley

🤔
Guillaume M.
Guillaume M.

🤔
Oscar Otero
Oscar Otero

🤔
Nico Prat
Nico Prat

🤔
Marco Solazzi
Marco Solazzi

🐛
atoupet-toki
atoupet-toki

🐛
Josias
Josias

🐛
Oksana Romaniv
Oksana Romaniv

🐛
Olivier Guilleux
Olivier Guilleux

🐛
Liroo Pierre ᵈᵉᵛ
Liroo Pierre ᵈᵉᵛ

💻
Luis Martins
Luis Martins

🐛
Matthew
Matthew

🤔 💬
Simon Goetz
Simon Goetz

🐛
Luís Carvalho
Luís Carvalho

💬
Samuel Berisha
Samuel Berisha

💬
Anderson Leite
Anderson Leite

💬 🐛
Jay Collett
Jay Collett

💬 🐛
Tim Gates
Tim Gates

🐛
Nicolas Cusan
Nicolas Cusan

💬 🐛 💻
Gerald Nako
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 for more information about your rights.