agentskills.codes
BA

barba-js

by ayofemiadeCodingSource

Enables seamless, high-performance page transitions for websites using Barba.js, making multi-page sites feel like SPAs.

FrontendAnimationJavaScriptTypeScript

Install

mkdir -p .claude/skills/barba-js && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/9849" && unzip -o skill.zip -d .claude/skills/barba-js && rm skill.zip

Installs to .claude/skills/barba-js

Activation

This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.

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.
446 chars✓ has a “when” triggerlonger than Claude Code's old 250-char listing cap (fine on current versions)
Intermediate

Key capabilities

  • →Smooth page transitions
  • →Lifecycle hook management
  • →View-based logic
  • →GSAP animation integration

How it works

It intercepts navigation to fetch new content via AJAX and manages transitions between containers without full reloads.

Inputs & outputs

You give it
Website navigation
You get back
Animated page transition

When to use barba-js

  • →Adding page transitions
  • →Improving navigation feel
  • →Implementing SPA-like routing
  • →Integrating GSAP animations

About this skill

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:

<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

  2. Container (data-barba="container")

    • Dynamic content area that updates on navigation
    • Only this section gets replaced during transitions
    • Must exist on every page

  3. Namespace (data-barba-namespace="home")

    • Unique identifier for each page type
    • Used in transition rules and view logic
    • Examples: "home", "about", "product", "blog-post"

2. Transition Lifecycle

Barba.js follows a precise lifecycle for each navigation:

Default Async Flow:

  1. User clicks link
  2. Barba intercepts navigation
  3. Prefetch next page (via AJAX)
  4. Cache new content
  5. Leave hook - Animate current page out
  6. Wait for leave animation to complete
  7. Remove old container, insert new container
  8. Enter hook - Animate new page in
  9. Wait for enter animation to complete
  10. Update browser history

Sync Flow (with sync: true):

  1. User clicks link
  2. Barba intercepts navigation
  3. Prefetch next page
  4. Wait for new page to load
  5. Leave and Enter hooks run simultaneously (crossfade effect)
  6. Swap containers
  7. Update browser history

3. Hooks

Barba provides 11 lifecycle hooks for controlling transitions:

Hook Execution Order:

Initial page load:
  beforeOnce → once → afterOnce

Every navigation:
  before → beforeLeave → leave → afterLeave →
  beforeEnter → enter → afterEnter → after

Hook Types:

  • Global hooks: Run on every transition (barba.hooks.before())
  • Transition hooks: Defined within specific transition objects
  • View hooks: Defined within view objects for page-specific logic

Common Hook Use Cases:

  • beforeLeave - Reset scroll position, prepare animations
  • leave - Animate current page out
  • afterLeave - Clean up old page
  • beforeEnter - Prepare new page (hide elements, set initial states)
  • enter - Animate new page in
  • afterEnter - Initialize page scripts, analytics tracking

4. Views

Views are page-specific logic containers that run based on namespace:

barba.init({
  views: [{
    namespace: 'home',
    beforeEnter() {
      // Home-specific setup
      console.log('Entering home page');
    },
    afterEnter() {
      // Initialize home page features
      initHomeSlider();
    }
  }, {
    namespace: 'product',
    beforeEnter() {
      console.log('Entering product page');
    },
    afterEnter() {
      initProductGallery();
    }
  }]
});

Common Patterns

1. Basic Setup

Installation:

npm install --save-dev @barba/core
# or
yarn add @barba/core --dev

Minimal Configuration:

import barba from '@barba/core';

barba.init({
  transitions: [{
    name: 'default',
    leave({ current }) {
      // Fade out current page
      return gsap.to(current.container, {
        opacity: 0,
        duration: 0.5
      });
    },
    enter({ next }) {
      // Fade in new page
      return gsap.from(next.container, {
        opacity: 0,
        duration: 0.5
      });
    }
  }]
});

2. Fade Transition (Async)

Classic fade-out, fade-in transition:

import barba from '@barba/core';
import gsap from 'gsap';

barba.init({
  transitions: [{
    name: 'fade',
    async leave({ current }) {
      await gsap.to(current.container, {
        opacity: 0,
        duration: 0.5,
        ease: 'power2.inOut'
      });
    },
    async enter({ next }) {
      // Start invisible
      gsap.set(next.container, { opacity: 0 });

      // Fade in
      await gsap.to(next.container, {
        opacity: 1,
        duration: 0.5,
        ease: 'power2.inOut'
      });
    }
  }]
});

3. Crossfade Transition (Sync)

Simultaneous fade between pages:

barba.init({
  transitions: [{
    name: 'crossfade',
    sync: true, // Enable sync mode
    leave({ current }) {
      return gsap.to(current.container, {
        opacity: 0,
        duration: 0.8,
        ease: 'power2.inOut'
      });
    },
    enter({ next }) {
      return gsap.from(next.container, {
        opacity: 0,
        duration: 0.8,
        ease: 'power2.inOut'
      });
    }
  }]
});

4. Slide Transition with Overlap

Slide old page out, new page in with overlap:

barba.init({
  transitions: [{
    name: 'slide',
    sync: true,
    leave({ current }) {
      return gsap.to(current.container, {
        x: '-100%',
        duration: 0.7,
        ease: 'power3.inOut'
      });
    },
    enter({ next }) {
      // Start off-screen right
      gsap.set(next.container, { x: '100%' });

      // Slide in from right
      return gsap.to(next.container, {
        x: '0%',
        duration: 0.7,
        ease: 'power3.inOut'
      });
    }
  }]
});

5. Transition Rules (Conditional Transitions)

Define different transitions based on navigation context:

barba.init({
  transitions: [
    // Home to any page: fade
    {
      name: 'from-home-fade',
      from: { namespace: 'home' },
      leave({ current }) {
        return gsap.to(current.container, {
          opacity: 0,
          duration: 0.5
        });
      },
      enter({ next }) {
        return gsap.from(next.container, {
          opacity: 0,
          duration: 0.5
        });
      }
    },
    // Product to product: slide left
    {
      name: 'product-to-product',
      from: { namespace: 'product' },
      to: { namespace: 'product' },
      leave({ current }) {
        return gsap.to(current.container, {
          x: '-100%',
          duration: 0.6
        });
      },
      enter({ next }) {
        gsap.set(next.container, { x: '100%' });
        return gsap.to(next.container, {
          x: '0%',
          duration: 0.6
        });
      }
    },
    // Default fallback
    {
      name: 'default',
      leave({ current }) {
        return gsap.to(current.container, {
          opacity: 0,
          duration: 0.3
        });
      },
      enter({ next }) {
        return gsap.from(next.container, {
          opacity: 0,
          duration: 0.3
        });
      }
    }
  ]
});

6. Router Plugin for Route-Based Transitions

Use @barba/router for route-specific transitions:

Installation:

npm install --save-dev @barba/router

Usage:

import barba from '@barba/core';
import barbaPrefetch from '@barba/prefetch';
import barbaRouter from '@barba/router';

// Define routes
barbaRouter.init({
  routes: [
    { path: '/', name: 'home' },
    { path: '/about', name: 'about' },
    { path: '/products/:id', name: 'product' }, // Dynamic segment
    { path: '/blog/:category/:slug', name: 'blog-post' }
  ]
});

barba.use(barbaRouter);
barba.use(barbaPrefetch); // Optional: prefetch on hover

barba.init({
  transitions: [{
    name: 'product-transition',
    to: { route: 'product' }, // Trigger on route name
    leave({ current }) {
      return gsap.to(current.container, {
        scale: 0.95,
        opacity: 0,
        duration: 0.5
      });
    },
    enter({ next }) {
      return gsap.from(next.container, {
        scale: 1.05,
        opacity: 0,
        duration: 0.5
      });
    }
  }]
});

7. Loading Indicator

Show loading state during page fetch:

barba.init({
  transitions: [{
    async leave({ current }) {
      // Show loader
      const loader = document.querySelector('.loader');
      gsap.set(loader, { display: 'flex', opacity: 0 });
      gsap.to(loader, { opacity: 1, duration: 0.3 });

      // Fade out page
      await gsap.to(current.container, {
        opacity: 0,
        duration: 0.5
      });
    },
    async enter({ next }) {
      // Hide loader
      const loader = document.querySelector('.loader');
      await gsap.to(loader, { opacity: 0, duration: 0.3 });
      gsap.set(loader, { display: 'none' });

      // Fade in page
      await gsap.from(next.container, {
        opacity: 0,
        duration: 0.5
      });
    }
  }]
});

Integration Patterns

GSAP Integration

Barba.js works seamlessly with GSAP for animations:

Timeline-Based Transitions:

import barba from '@barba/core';
import gsap from 'gsap';

barba.init({
  transitions: [{
    async leave({ current

---

*Content truncated.*

When not to use it

  • →Full page reload requirements
  • →Non-DOM based applications

Limitations

  • →Requires specific DOM structure
  • →Sync transitions can cause layout shifts

How it compares

It provides a structured lifecycle for transitions compared to manual DOM replacement.

Compared to similar skills

barba-js side by side with the closest alternatives in the catalog.

SkillInstallsUpdatedSafetyDifficulty
barba-js (this skill)01moReviewIntermediate
threejs-skills613moNo flagsIntermediate
3d-graphics336moNo flagsAdvanced
threejs-shaders46moNo flagsAdvanced

Try saying

Example prompts that trigger this skill in your AI assistant.

More by ayofemiade

View all by ayofemiade →

web3d-integration-patterns

ayofemiade

Meta-skill for combining Three.js, GSAP ScrollTrigger, React Three Fiber, Motion, and React Spring for complex 3D web experiences. Use when building applications that integrate multiple 3D and animation libraries, requiring architecture patterns, state management, and performance optimization across

00

You might also like

threejs-skills

sickn33

Three.js skills for creating 3D elements and interactive experiences

61152

3d-graphics

samhvw8

3D web graphics with Three.js (WebGL/WebGPU). Capabilities: scenes, cameras, geometries, materials, lights, animations, model loading (GLTF/FBX), PBR materials, shadows, post-processing (bloom, SSAO, SSR), custom shaders, instancing, LOD, physics, VR/XR. Actions: create, build, animate, render 3D scenes/models. Keywords: Three.js, WebGL, WebGPU, 3D graphics, scene, camera, geometry, material, light, animation, GLTF, FBX, OrbitControls, PBR, shadow mapping, post-processing, bloom, SSAO, shader, instancing, LOD, WebXR, VR, AR, product configurator, data visualization, architectural walkthrough, interactive 3D, canvas. Use when: creating 3D visualizations, building WebGL/WebGPU apps, loading 3D models, adding animations, implementing VR/XR, creating interactive graphics, building product configurators.

33104

threejs-shaders

CloudAI-X

Three.js shaders - GLSL, ShaderMaterial, uniforms, custom effects. Use when creating custom visual effects, modifying vertices, writing fragment shaders, or extending built-in materials.

430

gsap

martinholovsky

GSAP animations for JARVIS HUD transitions and effects

318

threejs-animation

CloudAI-X

Three.js animation - keyframe animation, skeletal animation, morph targets, animation mixing. Use when animating objects, playing GLTF animations, creating procedural motion, or blending animations.

57

threejs-lighting

CloudAI-X

Three.js lighting - light types, shadows, environment lighting. Use when adding lights, configuring shadows, setting up IBL, or optimizing lighting performance.

14

Search skills

Search the agent skills registry