Skip to content
master
Go to file
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time

README.md

barba.js [v2]

Stability CircleCI Coverage Status Commitizen friendly Conventional Commits lerna License All Contributors Slack 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 <head> (coming soon)
    • @barba/preset: ready-to-use basic transitions pack (fade, slide, …) (coming soon)

Main changes (TL;DR)

  • Barba now use data-barba-* attributes:
  • 2 main methods:
    • barba.init() for transitions, views and Barba core settings
    • barba.use() for plugins (router, css, prefetch, etc.)
  • Transitions:
    • are plain JS objects
    • are declared via the barba.init({ transitions })
    • use "hooks" corresponding to animation steps
      • hooks can be synchronous or asynchronous (via this.async() or Promise based)
      • all hooks receive same data argument
    • use "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:
    • 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
  • 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 🎉 👍

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

💬

Next steps

  • CI setup (PR, publish, …)
  • Write manual documentation
  • Generate code documentation
  • New website
  • More Testing, debugging, fixing, testing…
You can’t perform that action at this time.