Github url

barba

by barbajs

barbajs /barba

Create badass, fluid and smooth transition between your website's pages.

8.3K Stars 459 Forks Last release: almost 4 years ago (1.0.0) MIT License 625 Commits 84 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

barba.js [v2]

StabilityCircleCICoverage StatusCommitizen friendlyConventional CommitslernaLicenseAll ContributorsSlack channel

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
 _(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-wrapper for the [wrapper](https://barba.js.org/docs/getstarted/markup/#Wrapper)
  - data-barba-container for the [container](https://barba.js.org/docs/getstarted/markup/#Container)
  - data-barba-namespace for the [namespace](https://barba.js.org/docs/getstarted/markup/#Namespace)
- 2 main methods:
  - 

barba.init()

 for transitions, views and Barba core settings
  - 

barba.use()

 for plugins (router, css, prefetch, etc.)
- [Transitions](https://barba.js.org/docs/advanced/transitions/):
  - are plain JS objects
  - are declared via the 

barba.init({ transitions })

  - use "[hooks](https://barba.js.org/docs/advanced/hooks/)" corresponding to animation steps
  - hooks can be synchronous or asynchronous (via 

this.async()

 or Promise based)
  - all hooks receive same [

data

 argument](https://barba.js.org/docs/advanced/hooks/#data-argument)
  - use "[rules](https://barba.js.org/docs/advanced/transitions/#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](https://barba.js.org/docs/advanced/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](https://barba.js.org/docs/advanced/hooks/#data-argument)
- [Sync mode](https://barba.js.org/docs/advanced/transitions/#Sync-mode) will start 

leave

 and 

enter

``` transitions concurrently

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 :tada: :+1:

Contributors

| Luigi De Rosa
Luigi De Rosa

πŸ€” πŸ’» πŸ“– πŸ’¬ πŸ› ⚠️ πŸ‘€ πŸš‡ | Thierry Michel
Thierry Michel

πŸ€” πŸ’» πŸ“– πŸ’¬ πŸ› ⚠️ πŸ‘€ πŸš‡ | Xavier Foucrier
Xavier Foucrier

πŸ€” πŸ“– πŸ’¬ ⚠️ πŸ‘€ πŸ› | Marco Grimaldi
Marco Grimaldi

🎨 | 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

πŸ’¬ |

Next steps

  • CI setup (PR, publish, …)
  • Write manual documentation
  • Generate code documentation
  • New website
  • [] More Testing, debugging, fixing, testing…

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.