barbajs/barba

★ 12,926TypeScriptAudience · developerComplexity · 2/5LicenseSetup · easy

Mindmap

mindmap
  root((barba))
    What it does
      Page transitions
      Smooth navigation
      No SPA rebuild needed
    Tech stack
      JavaScript
      TypeScript
      Promises
    Features
      Hook system
      Transition rules
      Views per page
      Plugin system
    Use cases
      Static site animations
      Custom nav logic
      Page-specific scripts
    Audience
      Frontend developers
      Web designers

mindmap root((barba)) What it does Page transitions Smooth navigation No SPA rebuild needed Tech stack JavaScript TypeScript Promises Features Hook system Transition rules Views per page Plugin system Use cases Static site animations Custom nav logic Page-specific scripts Audience Frontend developers Web designers

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Add fade or slide transitions between pages on a static HTML website.

USE CASE 2

Build custom enter and exit animations triggered by specific navigation paths.

USE CASE 3

Attach page-specific JavaScript logic that runs only when a certain page is visible.

Tech stack

TypeScriptJavaScript

Getting it running

Difficulty · easy Time to first run · 30min

MIT license, use freely in any project, commercial or personal, with no restrictions beyond keeping the copyright notice.

In plain English

Barba.js is a small JavaScript library that adds animated transitions between pages on a website. Normally when you click a link, the browser discards the current page and loads a new one, causing a visible flash or delay. Barba intercepts those navigation events and instead smoothly swaps out the page content while playing a transition animation. This gives a multi-page website the feel of a single-page app without requiring you to rebuild your site architecture from scratch. The library weighs about 7KB compressed. It is written in TypeScript and works with Promises, the modern JavaScript approach for handling sequential operations. The README notes that examples use ES6+ syntax and assumes intermediate familiarity with HTML, CSS, and JavaScript. Barba provides a hook system that lets you define what should happen at each stage of a page transition: before the old page leaves, while content is loading, when the new page enters, and after everything is complete. You can attach custom animation code or logic to any of those hooks. A transition resolution system lets you set rules so Barba picks the right transition depending on where the user is navigating from and to. Views let you attach page-specific logic that runs when a particular page is visible. The library also has a plugin system for additional functionality, and it supports various performance strategies for keeping navigation fast. A showcase on the project website displays examples of sites built using Barba. Documentation is thorough and covers getting started, advanced patterns, the API reference, and recipes for common use cases. Barba is MIT licensed and maintained by an active open-source community. The full README is longer than what was shown.

Copy-paste prompts

Prompt 1

I have a multi-page HTML website and want to add a fade transition between pages using Barba.js. Show me the minimum HTML and JavaScript needed to get this working.

Prompt 2

Using Barba.js, how do I set up different animations for navigating from the homepage versus navigating from an inner page?

Prompt 3

I'm using Barba.js and some third-party scripts like analytics trackers reset when the page transitions. How do I reinitialize them correctly using Barba's hook system?

Prompt 4

Show me how to use Barba.js views to run a specific JavaScript function only when a user visits the contact page.

Open on GitHub → Explain another repo

← barbajs on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.