skills.rest
aungpwint
aungpwintCOMMUNITY
Explore all skills by this author →
GitHub

barba-js

Implement smooth page transitions between website pages using Barba.js and GSAP.

Updated Aug 26, 2026
Search Tags:#javascript#animation#vite#page transitions#gsap#spa navigation#barba.js
One-click install
npx skills add https://github.com/aungpwint/presentation --skill barba-js-aungpwint
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: barba-js
Source: https://github.com/aungpwint/presentation/tree/main/.agents/skills/barba-js
Command: npx skills add https://github.com/aungpwint/presentation --skill barba-js-aungpwint

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @barba/core, gsap, vite, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve? Multi-page websites trigger full page reloads on every navigation, causing jarring flashes and lost scroll state. This Skill helps you implement Barba.js to intercept navigation, fetch pages via AJAX, and animate transitions so multi-page sites behave like single-page applications. ## Core Features & Use Cases - Transition Implementation: Build fade, slide, scale, stagger, and curtain transitions using Barba's 11 lifecycle hooks with GSAP-powered animations. - View and Route Management: Configure namespace-based views, route-based transition rules with @barba/router, and plugins for prefetching, head updates, and CSS transitions. - Project Scaffolding: Generate complete starter projects with Vite, GSAP, and example pages using the included setup and transition generator scripts. - Use Case: You are building a portfolio site with separate HTML pages and want a crossfade effect when visitors click between Home, About, and Contact, while keeping the header persistent and tracking pageviews in analytics. ## Quick Start Ask the AI to set up Barba.js page transitions with a fade effect between your site's pages using GSAP animations.

Frequently Asked Questions about barba-js

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add page transitions to a multi-page website?▼

Use Barba.js to intercept link clicks and swap page content via AJAX. Add data-barba="wrapper" and data-barba="container" attributes to your HTML, then define transitions with leave and enter hooks that return GSAP animations.

How to use Barba.js with GSAP for animations?▼

Import both @barba/core and gsap, then return GSAP tweens or timelines from Barba's leave and enter hooks. GSAP tweens return promises, so Barba automatically waits for animations to complete before swapping containers.

Why does my Barba.js transition finish instantly without animating?▼

The leave or enter hook is not returning a promise, so Barba proceeds immediately. Fix it by returning the GSAP tween directly or declaring the hook as async and awaiting the animation.

Does Barba.js update the page title and meta tags on navigation?▼

Not by default. Install the @barba/head plugin to automatically sync title, meta, and link tags during transitions, or update them manually inside the barba.hooks.after callback.

What is the difference between sync and async transitions in Barba.js?▼

Async mode (default) runs the leave animation, swaps containers, then runs enter. Sync mode with sync: true runs leave and enter simultaneously for crossfade effects, but requires absolute positioning to prevent layout stacking.

Related Skills

Explore More Software Engineering Skills→
RishabhupadhyaRishabhupadhya

web-artifacts-builder

Bundle multi-component Claude artifacts into a single HTML document.

Community
Advanced
mgd34msumgd34msu
4

vercel-analytics

Track page views and Core Web Vitals for Vercel-deployed applications.

Community
Basic
fyunusafyunusa

locomotive-scroll

Implement smooth scrolling, parallax effects, and viewport detection with Locomotive Scroll.

Community
Intermediate
Dzakiamriz22Dzakiamriz22
1

page-transitions

Implement Framer Motion route transitions and shared element animations in Next.js App Router.

Community
Intermediate