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();
      }
    }
  ]
});

Longfellow

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

Longfellow

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

Nunciata

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Ocarina