I'm implementing barba JS on my React website but can't seem to get the file to work on the page. For reference, my folder structure is as follows:
theme
pages
Homepage.js
Contact.js
utils
anim.js
helpers.js
index.js
On my index.js file, I'm trying to import my anim.js script so that the file is applied to all my pages. However, upon compilation, I'm getting a 'delay' is not defined no-undef error on anim.js, even though delay is defined (because I'm importing gsap).
Homepage.js (Contact.js is similar, only difference being the data-barba-namespace)
import React from "react";
import LoadingScreen from "../components/LoadingScreen/LoadingScreen";
import Hero from "../components/Hero/Hero";
class Homepage extends React.Component {
render(){
return (
<>
<LoadingScreen />
<div data-barba="container" data-barba-namespace="home">
<Hero />
</div>
</>
)
}
}
export default Homepage;
anim.js
import { pageTransition, contentAnimation } from "./helpers";
import barba from '@barba/core';
import gsap from "gsap";
barba.init({
sync: true,
transitions: [{
async leave(data){
const done = this.async();
pageTransition();
await delay(1000);
done();
}, async enter(data){
contentAnimation();
}, async leave(data){
contentAnimation();
}}
]
});
helpers.js
export function pageTransition(){
var timeline = gsap.timeline();
timeline.to("loadingScreen",{
duration: 1.2,
width: "100%",
left: "0",
ease: "Expo.easeInOut"
});
timeline.to("loadingScreen",{
duration: 1,
width: "100%",
left: "100%",
ease: "Expo.easeInOut",
delay: 0.3
});
timeline.set(".LoadingScreen", { left: "-100%" } );
}
export function contentAnimation(){
var timeline = gsap.timeline();
timeline.from("animate-this", {
duration: 1,
y: 30,
opacity: 0,
stagger: 0.4,
delay: 0.2
});
}
index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { pageTransition, contentAnimation } from "./utils/helpers";
import { barba } from '../node_modules/@barba/core';
import anim from "./utils/anim";
import "./scss/style.scss";
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
index.html (shows barba wrapper)
<body data-barba="wrapper">
<main id="root"></main>
</body>
from How to include local script file on React page?
No comments:
Post a Comment