# Barba Js

Page transitions library for creating fluid, smooth transitions between website pages.

- Repository: https://github.com/freshtechbro/claudedesignskills (1210 stars)
- Category: Design
- License: MIT
- Last updated: 2025-11-20
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add freshtechbro/claudedesignskills --skill barba-js -g -a claude-code -y`
Codex: `npx skills add freshtechbro/claudedesignskills --skill barba-js -g -a codex -y`
Cursor: `npx skills add freshtechbro/claudedesignskills --skill barba-js -g -a cursor -y`
Gemini CLI: `npx skills add freshtechbro/claudedesignskills --skill barba-js -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add freshtechbro/claudedesignskills`

## Description

Page transitions library for creating fluid, smooth transitions between website pages. Use this skill when implementing page transitions, creating SPA-like experiences, adding animated route changes, or building websites with smooth navigation. Triggers on tasks involving Barba.js, page transitions, routing, view management, transition hooks, GSAP integration, or smooth page navigation. Works with gsap-scrolltrigger for transition animations.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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

### 1. Wrapper, Container, and Namespace

Barba.js uses a specific DOM structure to manage transitions:

**HTML Structure**:
```html
<body data-barba="wrapper">
  <!-- Static elements (header, nav) stay outside container -->
  <header>
    <nav>
      <a href="/">Home</a>
      <a href="/about">About</a>
    </nav>
  </header>

  <!-- Dynamic content goes in container -->
  <main data-barba="container" data-barba-namespace="home">
    <!-- This content changes on navigation -->
    <h1>Home Page</h1>
    <p>Content that will transition out...</p>
  </main>

  <!-- Static footer outside container -->
  <footer>© 2025</footer>
</body>
```

**Three Key Elements**:

1. **Wrapper** (`data-barba="wrapper"`)
   - Outermost container
   - Everything inside wrapper but outside container stays persistent
   - Ideal for headers, navigation, footers that don't change

The rest: https://github.com/freshtechbro/claudedesignskills/blob/HEAD/.claude/skills/barba-js/SKILL.md