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:
3.8.0
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(); } } ] });
I have since concluded that Barba JS is not compatible with React. Seems like the library needs updating to work with React Router
.
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: [{.....
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.