Barba.js

Barba.js loads the next page in the background and animates the transition without the browser having to reload the entire page. The result feels like an app: no white screens, no flashes, just a fluid movement from one page to the next.

What Barba.js is

A lightweight JavaScript library that takes over site navigation. When you click a link, Barba fetches the new page, swaps the content, and gives you control over what happens in between. We fill that gap with GSAP.

What we use it for

Sites where experience matters: restaurants, brands, portfolios, and sites that need to make a statement. Bistrobar Beaune uses it. This site uses it, with a pixel transition tailored to the brand. See animation and interaction.

Things to keep in mind

Third-party scripts must be re-initialized after every transition: forms, analytics, embeds, and Webflow's own interactions. If you don't, a form will stop working after the second page. We have a standard setup for this that cleanly shuts down and restarts every component. The navigation, page title, and theme color must also update accordingly. That is all included in our script.

How it fits into our stack

On a Webflowsite, using GSAP for animation and Lenis for scrolling, all in one script hosted on Vercel. Analytics via Google Analytics receives a page view for every transition.

When not to use it

For portals and applications with many forms and login requirements. In those cases, it adds more complexity than value. Also for sites where loading speed is more important than the user experience.