Cannot get Barba JS transition to work on page change

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

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: [{.....

Answer 2

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