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

<div data-barba="wrapper">
  <nav class="bp-nav">
    <span class="bp-logo">Studio</span>
    <a href="#page-home" data-barba-link class="bp-link is-active" data-target="page-home">Home</a>
    <a href="#page-work" data-barba-link class="bp-link" data-target="page-work">Work</a>
  </nav>

  <div data-barba="container" data-barba-namespace="home" id="page-home">
    <section class="bp-panel">
      <span class="bp-tag">Namespace: home</span>
      <h1>Barba.js in a single page</h1>
      <p>Click "Work" — Barba's leave/enter hooks fade and slide between containers even though both live in this one document.</p>
    </section>
  </div>

  <div data-barba="container" data-barba-namespace="work" id="page-work" hidden>
    <section class="bp-panel bp-panel--alt">
      <span class="bp-tag">Namespace: work</span>
      <h1>Second container</h1>
      <p>In a real multi-page site this would be a different URL entirely; here it's a second container Barba swaps in using the same transition hooks.</p>
    </section>
  </div>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#0b0c14;color:#fff;min-height:100vh}
.bp-nav{display:flex;align-items:center;gap:22px;padding:20px clamp(20px,5vw,48px);border-bottom:1px solid #1e2133}
.bp-logo{font-weight:800;letter-spacing:-.02em;margin-right:auto;font-size:16px}
.bp-link{color:#8b90ab;text-decoration:none;font-size:14px;font-weight:600;padding:6px 4px;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.bp-link:hover{color:#fff}
.bp-link.is-active{color:#fff;border-color:#f97316}
.bp-panel{min-height:64vh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:14px;padding:clamp(28px,7vw,72px);max-width:640px}
.bp-tag{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fdba74;background:#3a220c;padding:4px 10px;border-radius:999px}
.bp-panel h1{font-size:clamp(30px,6vw,52px);letter-spacing:-.02em}
.bp-panel p{color:#9aa0c0;font-size:16px;line-height:1.6}
.bp-panel--alt .bp-tag{color:#93c5fd;background:#0e2440}

// Barba.js is built for real multi-page navigation (swapping the DOM between
// different URLs via fetch). This sandbox is a single document, so instead of
// pointing barba.init() at real pages, we point it at two [data-barba="container"]
// panels that already exist in the page and toggle which one is visible/hidden
// using Barba's own "once" and "leave/enter" hook API — the same API you'd use
// in production, just driving in-page containers instead of fetched pages.

const containers = {
  home: document.getElementById('page-home'),
  work: document.getElementById('page-work'),
};
const links = document.querySelectorAll('[data-barba-link]');

// This is the real Barba.js transition shape: a "once" hook for first load and
// leave/enter hooks that each return a promise Barba awaits before continuing.
// In production, barba.init()'s own fetch-based router calls these for you on
// every internal link click. This sandbox has no second URL to fetch, so there
// is nothing for Barba's router to intercept — instead we call these same hook
// functions directly from our own click handler below, in the same leave-then-
// enter order Barba itself would use.
const transition = {
  once({ next }) {
    next.style.opacity = '1';
  },
  leave({ current }) {
    return animateContainer({ el: current, from: 1, to: 0, y: [0, -24] });
  },
  enter({ next }) {
    return animateContainer({ el: next, from: 0, to: 1, y: [24, 0] });
  },
};

barba.init({ transitions: [{ name: 'fade-slide', ...transition }] });
transition.once({ next: containers.home });

links.forEach((link) => {
  link.addEventListener('click', async (e) => {
    e.preventDefault();
    const target = link.dataset.target;
    const current = document.querySelector('[data-barba="container"]:not([hidden])');
    const next = containers[target === 'page-home' ? 'home' : 'work'];
    if (!current || next === current) return;

    links.forEach((l) => l.classList.toggle('is-active', l === link));

    await transition.leave({ current });
    current.hidden = true;
    next.hidden = false;
    await transition.enter({ next });
  });
});

// Drives the fade-slide purely with CSS transitions, matching Barba's
// convention that leave/enter return a promise the router awaits.
function animateContainer({ el, from, to, y }) {
  return new Promise((resolve) => {
    el.style.transition = 'none';
    el.style.opacity = String(from);
    el.style.transform = `translateY(${y[0]}px)`;
    requestAnimationFrame(() => {
      el.style.transition = 'opacity .35s ease, transform .35s ease';
      el.style.opacity = String(to);
      el.style.transform = `translateY(${y[1]}px)`;
    });
    setTimeout(resolve, 350);
  });
}