barbajs alternatives and similar libraries
Based on the "Animations" category.
Alternatively, view barba alternatives based on common mentions on social networks and blogs.
-
-
-
-
-
-
-
AutoAnimate
A zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Vue, or any other JavaScript application. -
tsParticles
tsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components. -
-
-
-
-
-
-
-
-
-
-
Scrawl-canvas Library
Responsive, interactive and more accessible HTML5 canvas elements. Scrawl-canvas is a JavaScript library designed to make using the HTML5 canvas element easier, and more fun -
-
-
Scroll Btween
ScrollBtween uses scroll position of document - or any DOM element - to tween CSS values on any DOM element. -
-
TransitionEnd
:dizzy: TransitionEnd is an agnostic and cross-browser library to work with transitionend event. -
-
Scroll Frames
Animate sequences of still frames on any DOM element in relation with its position into the viewport. https://olivier3lanc.github.io/Scroll-Frames/ -
CodeRabbit: AI Code Reviews for Developers
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of barbajs or a related project?
README
barba.js [v2]
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
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/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 settingsbarba.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
dataargument - use "rules" to select which transition to use
- default rules are
namespaceandcustom @barba/routeraddsrouterule- they can be combined within
fromandtoproperties
- 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
dataargument
- Sync mode will start
leaveandentertransitions 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](.github/CONTRIBUTING.md) before.
Thanks for taking time to contribute to Barba :tada: :+1:
Contributors
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --> <!-- prettier-ignore --> Luigi De Rosa🤔 💻 📖 💬 🐛 ⚠️ 👀 🚇Thierry Michel🤔 💻 📖 💬 🐛 ⚠️ 👀 🚇Xavier Foucrier🤔 💻 📖 💬 ⚠️ 👀 🐛Marco Grimaldi🎨Petr TIchy📝 ✅ 📹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💬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🐛atoupet-toki🐛Josias🐛Oksana Romaniv🐛Olivier Guilleux🐛Liroo Pierre ᵈᵉᵛ💻Luis Martins🐛Matthew🤔 💬Simon Goetz🐛Luís Carvalho💬Samuel Berisha💬
<!-- ALL-CONTRIBUTORS-LIST:END -->
Next steps
- [x] CI setup (PR, publish, …)
- [x] Write manual documentation
- [x] Generate code documentation
- [x] New website
- [ ] More Testing, debugging, fixing, testing…
*Note that all licence references and agreements mentioned in the barbajs README section above
are relevant to that project's source code only.