Barba.js

Barba.js laadt de volgende pagina op de achtergrond en animeert de overgang, zonder dat de browser de hele pagina opnieuw opbouwt. Het resultaat voelt als een app: geen wit scherm, geen flits, maar een beweging van de ene pagina naar de andere.

Wat Barba.js is

Een kleine JavaScript-bibliotheek die de navigatie van een site overneemt. Klik op een link, Barba haalt de nieuwe pagina op, wisselt de inhoud en geeft jou de controle over wat er in de tussentijd gebeurt. Wij vullen die tussentijd met GSAP.

Waarvoor wij het inzetten

Sites waar beleving telt: restaurants, merken, portfolio's, sites die iets moeten uitstralen. Bistrobar Beaune gebruikt het. Deze site gebruikt het, met een pixelovergang die bij het merk past. Zie animatie en interactie.

Waar je op moet letten

Scripts van derden moeten na elke overgang opnieuw starten: formulieren, analytics, embeds, Webflow's eigen interacties. Doe je dat niet, dan werkt een formulier na de tweede pagina niet meer. Wij hebben daar een vaste opzet voor die elk onderdeel netjes afsluit en opnieuw start. Ook de navigatie, de paginatitel en de themakleur moeten meewisselen. Dat zit in ons script.

Hoe het past in onze stack

Op een Webflow-site, met GSAP voor de animatie en Lenis voor het scrollen, in één script op Vercel. Analytics via Google Analytics krijgt per overgang een paginaweergave.

Wanneer niet

Bij portals en applicaties met veel formulieren en inlog. Daar brengt het meer complexiteit dan het oplevert. En bij sites waar snelheid van laden belangrijker is dan beleving.