πŸ”” Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Barba.jsΒ is a small, flexible and dependency free 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.Features:PjaxTransitionsViewsEventsCachePrefetch

Ajax Animation Web

Documentation

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

πŸ›
Liroo Pierre α΅ˆα΅‰α΅›
Liroo Pierre α΅ˆα΅‰α΅›

πŸ’»

Next steps

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

You May Also Like