无法让 Barba JS 转换来处理页面更改

Question

. Answers to this question are eligible for a +50 reputation bounty. Freddy wants to to this question.

I'm trying to get Barba JS , alongside GSAP , implemented on my React website.

For reference, I have followed this video tutorial here , this tutorial of course, is not in React .

Here is my folder structure which showcases all of the relevant files for this transition effect:

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

I have the following packages installed:

• gsap - version 3.8.0
• @barba/core - version 2.9.7

Current results

• No console errors and no compilation errors.

• When switching pages, there's no transition. It almost feels like barba isn't initiated.

Demo:

As the demo involves a few files, I have created a codesandbox here .

Edit:

Have updated my barba transition code and have added debug: true . Then, when hovering over my contact page button, the console shows the 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(); } } ] });

Answer 1

I have since concluded that Barba JS is not compatible with React. Seems like the library needs updating to work with React Router .

More details here

Answer 2

Dificult to say but you can set debug: true, inside the initialization of barba so it will spit out logs of whats happening ;)

barba.init({ debug: true, sync: false, //views das paginas views: [{.....