Estoy tratando de implementar Barba JS , junto con GSAP , en mi sitio web de React .

Como referencia, he seguido este video tutorial aquí , este tutorial, por supuesto, no está en React .

Aquí está mi estructura de carpetas que muestra todos los archivos relevantes para este efecto de transición:

 theme public index.html src components Header Header.js pages Homepage Contact utils anim.js helpers.js App.js index.js

Tengo los siguientes paquetes instalados:

• gsap - versión 3.8.0
• @barba/core - versión 2.9.7

Resultados actuales

• Sin errores de consola y sin errores de compilación.

• Al cambiar de página, no hay transición. Casi se siente como si barba no estuviera iniciada.

Manifestación:

Como la demostración involucra algunos archivos, he creado un codesandbox aquí .

Editar:

Actualicé mi código de transición de barba y agregué debug: true . Luego, al pasar el mouse sobre el botón de mi página de contacto, la consola muestra el error: [@barba/core] Error: Fetch error at XMLHttpRequest.o.onerror ?

 import { pageTransition } from "./helpers"; import barba from '@barba/core'; export function delay(n) { n = n || 2000; return new Promise((done) => { setTimeout(() => { done(); }, n); }); } barba.init({ debug: true, sync: true, transitions: [ { async leave(data){ const done = this.async(); pageTransition(); await delay(1000); done(); } } ] });