Skip to content
Get packs

Guide · Open source

How to use Barba.js: install, set up transitions and tips

Updated · written with AI from the project's own documentation and checked against our catalogue data

Barba.js (usually called Barba) is a small JavaScript library that makes moving between the pages of a website feel smooth, with animated transitions. This guide is for developers and designers who already know HTML, CSS and JavaScript and want to add page transitions to a multi-page site. By the end you will know what Barba does, what you need before installing it, and how its main pieces (transitions, hooks and views) fit together.

barba.jsbarbajs/barba · ★ 13k · MIT

Quick start

  1. 1Check your setup. Confirm you have Node.js installed and a multi-page site that can use ES6+ syntax. If not, read the legacy example first.
  2. 2Get the source. Run the clone command from the README to download the repository.
  3. 3Read the user guide. Follow the official user guide at barba.js.org for installation and setup steps.
  4. 4Define your transition. Write a transition with leave and enter hooks that animate the current page out and the next page in.
  5. 5Attach views. Use Views to run custom code only on the pages that need it.
  6. 6Test navigation. Click between pages and check that transitions play and that page-specific code runs.

What Barba.js does and what it does not do

Barba is a transition library. Its README describes it as a small library (about 7kb minified and compressed) that helps you create fluid transitions between your website's pages. It makes a multi-page site behave somewhat like a single-page application (SPA), which the README says can reduce the delay between pages and minimise repeated browser HTTP requests.

The README also positions Barba as a transition library rather than a complete app framework. It is written in TypeScript and works with Promises.

  • Good fit: adding animated transitions to an existing multi-page website.
  • Not a fit: building a full application from scratch.

Check the prerequisites before you install

The README excerpt lists Node.js as a prerequisite but does not state which version you need, so check the project's documentation for that. The guide assumes intermediate knowledge of HTML, CSS and JavaScript.

All code examples in the README use ES6+ syntax. If your project cannot use ES6+, the README points to a separate legacy code example at the official site.

  • Working knowledge of HTML, CSS and JavaScript
  • Node.js installed (required version not stated in the README excerpt)
  • ES6+ support in your project, or use the legacy example

Get the Barba source code

The README excerpt shows the repository clone command below. It is the only install command in the source material, so use it as given and follow the official user guide for the rest of the setup.

The README lists the official user guide as the place to learn how to install and use the library, and the official website is barba.js.org.

git clone https://github.com/barbajs/barba

Understand transitions, hooks and views

Barba's core features are transitions, hooks and views. Transitions are the animations that play when leaving one page and entering the next. Hooks are lifecycle methods for Transitions and Views, which let you run code at set points. Rules let Barba pick the right transition for a given navigation.

Views attach custom code to a specific page, so you can run logic only where it is needed. Sync mode controls whether the leave and enter hooks play together.

  • Transitions: the animated change between pages
  • Hooks: lifecycle methods for Transitions and Views
  • Views: custom logic attached to a specific page
  • Rules: how Barba picks the right transition
  • Sync mode: whether leave and enter hooks play together

Know the optional extras

The README lists several extra features: namespaces and a data attribute schema for markup, progressive enhancement for modern browsers, strategies for keeping the site fast, recipes for workflow, built-in utility methods, and a plugin system.

Check the official documentation for the details of each feature before relying on it in your project.

  • Namespaces and data attribute schema for markup
  • Browser support via progressive enhancement
  • Built-in utilities and plugins

What people use it for

  • Animating page changes on a portfolio site
  • Adding motion to a marketing site without rebuilding it as a SPA
  • Running custom scripts on specific pages through Views
  • Giving designers a way to add transitions alongside developers

Frequently asked questions

Is Barba.js free to use?

Yes. The repository is licensed under MIT, as the README badge shows. Check the LICENSE.md file in the repository for the full terms.

What do I need to install Barba.js?

The README lists Node.js as a prerequisite but does not state a version. You also need working knowledge of HTML, CSS and JavaScript, and ES6+ support in your code.

Is Barba.js a single page application framework?

No. The README describes Barba as a transition library that makes a multi-page site behave somewhat like a SPA. It is not a complete app framework.

What are the alternatives to Barba.js?

Comparable projects include Swup, Turbo (Hotwire), and other page transition libraries. Compare them on how they handle transitions, page-specific code and your existing site structure.

Can beginners learn Barba.js?

The README says the guide assumes intermediate knowledge of HTML, CSS and JavaScript. Beginners should learn the basics first.

Does Barba.js work with older browsers?

The README mentions progressive enhancement for modern browsers and a legacy code example for projects that cannot use ES6+. Check the browser support page on the official site for details.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Barba.js suits developers who want animated page transitions on an existing multi-page website, and designers working with them on motion-heavy sites. It is not the right choice if you need a full application framework, if you are a complete beginner, or if your project cannot use ES6+ and you do not want to use the legacy example.

Install options & downloads