Skip to content
Create badass, fluid and smooth transition between your website's pages.
TypeScript JavaScript HTML CSS
Branch: master
Clone or download
thierrymichel chore(release): publish
 - @barba/core@2.9.6
 - @barba/router@2.1.10
Latest commit f5c8cb6 Dec 12, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
.github docs(root): ✏️ Update slack shared invitation link Oct 16, 2019
.vscode refactor: 🎉 initial setup Oct 25, 2018
cypress fix(core): 🚑 fix URL with query/hash Oct 22, 2019
documentation refactor(root): ♻️ rename appear to once Nov 5, 2019
packages chore(release): publish Dec 12, 2019
.all-contributorsrc docs(root): 👥 add @Eruvarn as a contributor Nov 6, 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 build(root): ⬆️ update deps + lint-staged config Aug 23, 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): 📝 Update CONTRIBUTING using only yarn instead of npm Oct 21, 2019
LICENSE refactor: 🎉 initial setup Oct 25, 2018
NOTES.md build(root): 🚀 add release:next script Apr 29, 2019
README.md docs(root): 👥 add @Eruvarn as a contributor Nov 6, 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 fix(root): 🎨 improve typings for TS Nov 25, 2019
lerna.json
package.json chore(root): ⬆️ update/clean deps Dec 8, 2019
prettier.config.js docs(root): 📝 add basic usage + code documentation Dec 8, 2018
tsconfig.json build(core): 🔧 fix build warnings Oct 22, 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): ⬆️ update/clean deps Dec 8, 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":
      • beforeOnce, afterOnce, 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

🐛
Liroo Pierre ᵈᵉᵛ
Liroo Pierre ᵈᵉᵛ

💻
Luis Martins
Luis Martins

🐛
Matthew
Matthew

🤔 💬
Simon Goetz
Simon Goetz

🐛
Luís Carvalho
Luís Carvalho

💬
Eruvarn
Eruvarn

💻

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.