barba-js
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,
By freshtechbro · 1,877 installs
npx skills add freshtechbro/claudedesignskills --skill barba-js
Source repository · Upstream listing
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 :
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 :
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:
Common Patterns
1. Basic Setup
Installation :
Minimal Configuration :
2. Fade Transition (Async)
Classic fade out, fade in transition:
3. Crossfade Transition (Sync)
Simultaneous fade between pages:
4. Slide Transition with Overlap
Slide old page out, new page in with overlap:
5. Transition Rules (Conditional Transitions)
Define different transitions based on navigation context:
6. Router Plugin for Route Based Transitions
Use @barba/router for route specific transitions:
Installation :
Usage :
7. Loading Indicator
Show loading state during page fetch:
Integration Patterns
GSAP Integration
Barba.js works seamlessly with GSAP for animations:
Timeline Based Transitions :
Reference gsap scrolltrigger skill for advanced GSAP integration patterns.
View Specific Initialization
Initialize libraries or scripts per page:
Analytics Tracking
Track page views on navigation:
Third Party Script Re Initialization
Re run scripts after page transitions:
Performance Optimization
1. Prefetching
Use @barba/prefetch to load pages on hover:
2. Prevent Layout Shift
Set container min height to prevent content jump:
3. Optimize Animations
Use GPU accelerated properties:
4. Clean Up Event Listeners
Remove listeners in beforeLeave or view hooks:
5. Lazy Load Images
Defer image loading until after transition:
Common Pitfalls
1. Forgetting to Return Promises
Problem : Transitions complete instantly without waiting for animations.
Solution : Always return promises or use async/await :
2. Not Preventing Default Link Behavior
Problem : Some links cause full page reloads.
Solution : Barba automatically prevents default on internal links, but you may need to exclude external links:
3. CSS Conflicts Between Pages
Problem : Old page CSS affects new page layout during transition.
Solution : Use namespace specific CSS or reset styles:
Or reset in beforeEnter :
4. Not Updating Document Title and Meta Tags
Problem : Page title and meta tags don't update on navigation.
Solution : Use @barba/head plugin or update manually:
Or manually:
5. Animation Flicker on Enter
Problem : New page flashes visible before enter animation starts.
Solution : Set initial invisible state in CSS or beforeEnter :
6. Sync Transitions Without Proper Positioning
Problem : Sync transitions cause layout shift as containers stack.
Solution : Position containers absolutely during transition:
Or manage in JavaScript:
Resources
This skill includes:
scripts/
Executable utilities for common Barba.js tasks:
transition generator.py Generate transition boilerplate code
project setup.py Initialize Barba.js project structure
references/
Detailed documentation:
api reference.md Complete Barba.js API (hooks, transitions, views, router)
hooks guide.md All 11 hooks with execution order and use cases
gsap integration.md GSAP animation patterns for Barba transitions
transition patterns.md Common transition implementations
assets/
Templates and starter projects:
starter barba/ Complete Barba.js + GSAP starter template
examples/ Real world transition implementations
Related Skills
gsap scrolltrigger For advanced GSAP animations in transitions
locomotive scroll Can be combined with Barba for smooth scrolling between pages
motion framer Alternative approach for React based page transitions