Barba.js Page Transition — Free Container-Swap Transition Snippet

Barba.js is built for real multi-page sites: it intercepts link clicks, fetches the next page's HTML over the network, and swaps a [data-barba="container"] element while running leave/enter transition hooks around the swap — that's how you get an animated crossfade between two actual URLs without a full page reload. A live sandbox like this one is a single HTML document with no server to fetch other pages from, so this snippet adapts Barba's exact hook shape — once, leave, enter, wrapped in a transitions array passed to barba.init() — onto two containers that already both live in the page, toggled by hidden instead of fetched over the network.

What's real Barba and what's adapted

barba.init({ transitions: [...] }), the once/leave/enter hook names, and the data-barba="wrapper" / data-barba="container" / data-barba-namespace markup are exactly how Barba is used in production. What's adapted is the navigation trigger: production Barba listens for clicks on any internal link and performs a real fetch, whereas this sandbox has no second page to fetch, so a small click handler toggles which container is visible and drives the same before/after transition timing Barba's hooks expect. If you drop this into a real multi-page site, you'd delete the click handler and toggling logic and let barba.init() manage navigation itself — the hook functions themselves barely change.

Why namespaces matter

Each container carries data-barba-namespace (home, work). In production this lets you register different transitions for different page-type pairs — a subtle crossfade between two blog posts, a bigger slide between the home page and a case study — by checking namespace inside the hook or by scoping transitions with from/to namespace filters. This snippet keeps a single transition for both, but the namespace attributes are there so extending it to per-pair transitions is a small addition, not a rewrite.

The fade-slide itself

leave animates the current container's opacity to 0 and nudges it up 24px; enter starts the next container 24px below its resting position at opacity 0 and animates it in. Because both are plain CSS transitions driven from JS (no external animation library needed beyond Barba itself), the pattern generalizes to a scale, blur, or clip-path transition just by changing what the hook functions set.

Where this differs from a scroll or hover effect

This is a navigation transition, not a scroll-triggered one — compare it to Swup page transition, which solves the identical problem with a different library and a hooks-object API instead of a transitions array. For animating elements as they scroll into view rather than on navigation, see scroll reveal grid.

Customizing it

Add more containers and namespaces, swap the fade-slide for a curtain wipe or shared-element morph, or add a loading bar during leave for slower page swaps. In a real deployment, remove the click-interception shim entirely — Barba's own link listener and fetch pipeline replace it outright.