• Stars
    star
    11,596
  • Rank 2,853 (Top 0.06 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created about 9 years ago
  • Updated 3 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Create badass, fluid and smooth transitions between your website’s pages

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

πŸ’¬
Anderson Leite
Anderson Leite

πŸ’¬ πŸ›
Jay Collett
Jay Collett

πŸ’¬ πŸ›
Tim Gates
Tim Gates

πŸ›
Nicolas Cusan
Nicolas Cusan

πŸ’¬ πŸ› πŸ’»

Next steps

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