What problem does it solve? Multi-page websites traditionally reload the entire page on every navigation, causing jarring flashes, lost scroll state, and slow perceived performance. This Skill helps you implement Barba.js to intercept navigation, fetch pages via AJAX, and animate transitions so multi-page sites feel like single-page applications. ## Core Features & Use Cases - Transition System: Define fade, slide, scale, stagger, and curtain transitions with lifecycle hooks (leave, enter, sync mode) and conditional rules based on namespace or route. - Views and Hooks: Run page-specific initialization and cleanup logic per namespace, plus global hooks for analytics, scroll reset, and third-party script re-initialization. - Project Scaffolding: Generate a complete Barba.js + GSAP + Vite starter project with example pages, or generate standalone transition boilerplate code. - Use Case: You are building a portfolio site with separate HTML pages and want a crossfade animation 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 animation for your multi-page website using GSAP.
