barba

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.