Setting barba.js
how to I setup barba up using the the functions mentioned below? I've added the comments on what each one does
function delay(n) {
n = n || 1500;
return new Promise((done) =>
{
setTimeout(() => {
done();
}, n);
});
};
barba.init({
sync: true,
transitions: [
{
once(data) {
console.log("once");
loader(); //Initial page load, plays one time when user visits website
navScroll();//Hides elements of the navbar on scroll
textReveal();//text reveal, added this to reset the state on other page load
lineReveal();//Reveals div borders scrollTrigger, added to reset state
buttonAnimation();
},
async leave(data) {
console.log("leave");
// const done = this.async();
transition();//animation between pages
await delay(2000);
// done();
},
async enter(data) {
window.scrollTo(0,0);//doesn't seem to work
console.log("scroll 0")
textReveal();
aboutReveal();
navScroll();
},
async after(data) {
console.log("after");
navScroll();
textReveal();
valueSet();
lineReveal();
},
},
],
})
function delay(n) {
n = n || 1500;
return new Promise((done) =>
{
setTimeout(() => {
done();
}, n);
});
};
barba.init({
sync: true,
transitions: [
{
once(data) {
console.log("once");
loader(); //Initial page load, plays one time when user visits website
navScroll();//Hides elements of the navbar on scroll
textReveal();//text reveal, added this to reset the state on other page load
lineReveal();//Reveals div borders scrollTrigger, added to reset state
buttonAnimation();
},
async leave(data) {
console.log("leave");
// const done = this.async();
transition();//animation between pages
await delay(2000);
// done();
},
async enter(data) {
window.scrollTo(0,0);//doesn't seem to work
console.log("scroll 0")
textReveal();
aboutReveal();
navScroll();
},
async after(data) {
console.log("after");
navScroll();
textReveal();
valueSet();
lineReveal();
},
},
],
})
3 Replies