Skip to content
Create badass, fluid and smooth transition between your website's pages.
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci docs(root): 🔧 tweak docs folders/config Mar 17, 2019
.github Delete ISSUE_TEMPLATE.md Mar 17, 2019
.vscode refactor: 🎉 initial setup Oct 25, 2018
cypress test(root): improve e2e tests Apr 14, 2019
documentation docs(core): ✏️ fix missing escape character Jun 13, 2019
packages chore(release): publish Jun 11, 2019
.all-contributorsrc docs(root): 👥 add @oguilleux as a contributor Apr 14, 2019
.editorconfig refactor: 🎉 initial setup Oct 25, 2018
.eslintrc.js chore: 🔧 cleanup, remove deps, lint config, … Mar 11, 2019
.gitignore test(root): 🔧 add cypress "config" folder Mar 18, 2019
.lintstagedrc.yml chore: 🔧 cleanup, remove deps, lint config, … Mar 11, 2019
.markdownlint.json docs(root): 📝 add basic usage + code documentation Dec 8, 2018
AUTHORS chore: 📝 add authors by package Jan 21, 2019
CI.md ci(root): 💚 deploy doc Mar 12, 2019
CODE_OF_CONDUCT.md Create CODE_OF_CONDUCT.md Mar 17, 2019
CONTRIBUTING.md docs(root): ✏️ Mar 17, 2019
LICENSE refactor: 🎉 initial setup Oct 25, 2018
NOTES.md build(root): 🚀 add release:next script Apr 29, 2019
README.md docs(root): 📝 use `@barba/preset` for the transitions pack May 24, 2019
TODO.md test(core): test e2e testing Feb 5, 2019
commitlint.config.js build: 🔧 last commitlint config Dec 12, 2018
cypress.json test(root): 🔧 create Cypress project Feb 7, 2019
jest.config.js chore: 🔧 cleanup, remove deps, lint config, … Mar 11, 2019
lerna.json build(root): 🔧 limit lerna bracnches Mar 17, 2019
package.json chore(root): ⬆️ upgrade deps Jun 11, 2019
prettier.config.js docs(root): 📝 add basic usage + code documentation Dec 8, 2018
tsconfig.json chore: 🔧 cleanup, remove deps, lint config, … Mar 11, 2019
tslint.json chore: 🔧 cleanup, remove deps, lint config, … Mar 11, 2019
typedoc.json docs(root): 🔧 tweak docs folders/config Mar 17, 2019
yarn.lock chore(root): ⬆️ upgrade deps Jun 11, 2019

README.md

barba.js [v2]

stability-wip CircleCI Coverage Status Commitizen friendly Conventional Commits lerna License All Contributors Slack channel

Invite link to slack channel

Barba is a small (7kb minified and compressed) and easy-to-use library that helps you creating fluid and smooth transitions between your website's pages.

It helps reducing the delay between your pages, minimizing browser HTTP requests and enhancing your user's web experience.

This is beta version, use it at your own risks! 😱
Thanks in advance for reporting bugs. #sharethelove 😊

Looking for v1? 👈

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":
      • beforeAppear, afterAppear, beforeLeave, afterLeave, beforeEnter, afterEnter
      • receive the same data argument
  • Sync mode will start leave and enter transitions concurrently

Documentation

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

🎨
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

💬
Deleted user
Deleted user

💬
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

🐛

Next steps

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