Barba.js

Barba JS integrates the Barba.js library with Drupal to deliver smooth,
SPA‑like page transitions with minimal setup. It auto‑loads a local build when
present, or falls back to the official CDN. The optional UI submodule lets you
control where and how the library is attached.

Features

• Smooth, SPA‑like page transitions using Barba.js.
• No jQuery dependency; lightweight UMD builds.
• Automatic local vs. CDN loading with safe fallback.
• Optional plugins: CSS, Prefetch, Router.
• Granular control via “Barba JS UI” (themes, paths, plugins, variant).

Use this module when you want faster, more fluid navigation without adopting a
full SPA framework. Typical use cases include content sites, portfolios, blogs,
and marketing pages where page transitions improve perceived performance and UX.

Post-Installation

1. Enable Barba JS (auto‑attaches Barba to frontend pages).
2. (Optional) Enable Barba JS UI for configuration at
   Configuration → User interface → Barba
   (/admin/config/user-interface/barba/settings).
3. Choose attach method: Local (if UMD files exist) or CDN.
4. Select plugins (CSS / Prefetch / Router) and build variant (min/non‑min).
5. Limit loading by theme or by path patterns as needed.
6. Add your transition code in your theme or a custom module:
   

   barba.init({
     transitions: [{
       name: 'fade',
       async leave({ current }) {
         await gsap.to(current.container, { opacity: 0 });
       },
       enter({ next }) {
         return gsap.from(next.container, { opacity: 0 });
       }
     }]
   });

Additional Requirements

• None. Barba.js can load from the bundled dist/ or jsDelivr CDN.
• (Optional) Local install: place UMD builds under
  libraries/barba/dist/ (or multisite equivalent).

Recommended modules/libraries

• Barba JS UI (submodule): adds a configuration UI.
• GSAP (optional): for richer animation timelines.

Similar projects

Modules that provide PJAX/AJAX navigation may offer partial page swaps, but
Barba JS focuses on transition orchestration, view lifecycle hooks, and plugin
ecosystem (CSS/Prefetch/Router) while staying library‑agnostic and lightweight.

Supporting this Module

Enjoying this project? You can support maintenance and new features by
sponsoring issues on the project queue or contacting the maintainer on
Drupal.org.

Community Documentation

• Barba.js Docs: Get started
• Barba.js Examples: Demos
• GitHub: barbajs/barba