barba-js

SKILL.md

Barba.js

Modern page transition library for creating fluid, smooth transitions between website pages. Barba.js makes multi-page websites feel like Single Page Applications (SPAs) by hijacking navigation and managing transitions without full page reloads.

Overview

Barba.js is a lightweight (7kb minified and compressed) JavaScript library that intercepts navigation between pages, fetches new content via AJAX, and smoothly transitions between old and new containers. It reduces page load delays and HTTP requests while maintaining the benefits of traditional multi-page architecture.

Core Features:

Smooth page transitions without full reloads

Lifecycle hooks for precise control over transition phases

View-based logic for page-specific behaviors

Built-in routing with @barba/router plugin

Extensible plugin system

Small footprint and high performance

Framework-agnostic (works with vanilla JS, GSAP, anime.js, etc.)

Core Concepts