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 😊
- Simplified API
- Hook sytem for
transitionsandviews - Transition resolution: declare your transitions and let Barba pick the right one
- Use of
data-barbaattributes - 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/transition: ready-to-use basic transitions pack (fade, slide, …) (coming soon)
- Barba container and wrapper now use
data-barbaattribute - Same for namespace via
data-barba-namespace - 2 main methods:
barba.init()andbarba.use()(for plugins) - 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
dataargument
- hooks can be synchronous or asynchronous (via
- use "rules" to select which transition to use
- default rules are
namespaceandcustom @barba/routeraddsrouterule- they can be combined within
fromandtoproperties
- default rules are
- 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
dataargument
- Sync mode will start
leaveandentertransitions concurrently
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 🎉 👍
Luigi De Rosa
🤔 💻 📖 💬 🐛⚠️ 👀 🚇
Thierry Michel
🤔 💻 📖 💬 🐛⚠️ 👀 🚇
Xavier Foucrier
🤔 📖 💬⚠️ 👀
Marco Grimaldi
🎨
Cody Marcoux
💬
Phil.
💬
Giorgio Finulli
💬
Wouter
🐛 💬
Mike Wagz
🤔 💬⚠️
Red Stapler
✅ 📹
Jérémy Levron
💬
Nguyen Van Anh
💻
Daniel Weber
💻
Jean-Marie Porchet
💻
James
💻
Nicholas
💻
Patrick Arminio
💻
A (from Sicily)
💻
Pavel Mazhuga
💬
Daniele De Matteo
💬
aswinkumar863
💬
Deleted user
💬
BounceIncHQ
💬
gordonwes
💬
Evan Fleet
💬 🐛
Jörg
💡
ZAAK
💡 💬
Masahiro Tonomura
💡
CassiusHR
💬
Shane Murphy
💬
Dylan Reeves
💬 💡
Quentin Neyraud
💬
tortilaman
💬
psntr
💬
Kevin Clark
💬
Tadeas Kosek
💬
Gustavo de Andrade
💬
Clinton
💬
Dave Stockley
💬
khaiknievel
💬 🐛
Francesco Michelini
💬 💡
Domantas Petrauskas
💬
Kyle Brumm
💬
Oliver Belmont
💬
Lu Nelson
💬
Bram Cordie
💬 🤔
Michael Schouman
💬
Pascal Garber
💬 🤔
Federico Brigante
💬
Corey Lee
💬
Milan Simonovic
💬
Julien Vasseur
💬
Maciej Wrona
💬
Terion
🤔
Matt Seccafien
🤔
Max Schulmeister
🤔
David
🤔
Pierre-Henri Lavigne
🤔
lsbyerley
🤔
Guillaume M.
🤔
Oscar Otero
🤔
Nico Prat
🤔
Marco Solazzi
🐛
- CI setup (PR, publish, …)
- Write manual documentation
- Generate code documentation
- Testing, debugging, fixing, testing…
- e2e testing suite
- New website