barba.js
A small JavaScript library that adds smooth page transitions to websites without full reloads.barbajs/barba
- Stars
- 13k
- Forks
- 494
- Licence
- MIT
- Language
- TypeScript
- Last update
- 1.9 years ago
- Type
- Library
No commits in over a year — check for forks or alternatives before adopting.
What it is
Barba.js is a small library (about 7kb minified and compressed, per its README) that makes moving between pages on a website feel smooth, with animated transitions. It makes a multi-page site behave somewhat like a single-page application, which the README says can reduce delays between pages and cut repeated browser requests. It is written in TypeScript and works with Promises.
- Add a fade or slide animation when visitors click between pages on a site
- Run page-specific JavaScript only on the pages that need it, using Views
- Choose different transitions for different page changes, using transition rules
- Prefetch linked pages to reduce the delay before navigation (the topics list prefetch; confirm details in the docs)
Great for
- Developers adding animated transitions to an existing multi-page website
- Front-end developers who want to reduce page-load delay without rebuilding as a full single-page app
- Designers working with developers on motion-heavy marketing or portfolio sites
- Developers who want custom code that runs on specific pages through its View system
Not ideal for
- People who need a full application framework; the README positions Barba as a transition library, not a complete app framework
- Beginners with no HTML, CSS, or JavaScript experience, since the README says it assumes intermediate knowledge
- Projects that cannot use ES6+ syntax, because the README says all code examples use it, and a legacy example is provided separately
How to get it
- 1
Install with a package manager
You'll need: Node.js (version not stated in the README excerpt)
Clone the repository
git clone https://github.com/barbajs/barba - 2
Run it
- Read the user guide at https://barba.js.org/docs/getstarted/intro/ to see how to install the library
- Add Barba to a site with a container and data attributes as described in the markup docs
- Define a transition in your script using the hook and transition APIs
- Load the page in a browser and click a link to see the transition
- 3
Get the most out of it
- Use transition rules to pick different animations for different page changes
- Use Views to attach page-specific code to individual pages
- Use the sync mode option to control whether leave and enter animations play together
- Review the plugin documentation for extra functionality
Downloads
Strengths
- Small footprint, which the README states as about 7kb minified and compressed
- Clear documentation site with user guide, API reference, and examples
- Uses MIT license and has a large star count and an active release (v2.10.3)
Trade-offs
- Last push date in the metadata is December 2024, so check current maintenance status before relying on it
- The README is truncated and says little about browser support details beyond linking to the docs
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| barba (this) | 13k | Library | intermediate | 1.9 years ago | Developers adding animated transitions to an existing multi-page website |
| anime | 74.2k | Library | beginner | 3 months ago | Front-end developers adding motion to websites or web apps |
| mojs | 18.9k | Library | intermediate | 3 months ago | Front-end developers who want decorative animated effects like bursts, shapes, or icon animations |
| animated-tab-bar | 11.1k | Library | intermediate | 4.8 years ago | iOS developers who want animated tab bar icons without writing the animation logic from scratch |
| lax.js | 10.5k | Library | intermediate | 1.5 years ago | Developers adding simple scroll-linked effects to a static site or plain HTML page |
| folding-cell | 10.2k | Library | intermediate | 2.5 years ago | iOS developers building list screens with expandable items |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.