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.jsI 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
barbaisn'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();
}
}
]
});
