javascript is almost new for me and I wanted to use a transition with barba.js.
Unfortunately, I encountered a problem that seems common, once my transition is done, I have to reload the page for the additional scripts to work.
I've been looking for a long time and tried a lot of solutions, but with my level of javascript, I'm not even sure I've typed the code correctly.
I leave my Github project here, if someone is willing to explain to a noob how to write code correctly, I will be eternally grateful.
https://github.com/Jeremmie/punchyparasite_2
const wipe = document.querySelector('.wipe-transition');
const allBandes = document.querySelectorAll('.bande');
const TLAnim = new TimelineMax();
function delay(n) {
return new Promise((done) => {
setTimeout(() => {
done();
}, n)
})
}
barba.init({
sync: true,
transitions: [
{
async leave() {
const done = this.async();
TLAnim
.to(allBandes, { height: '100%', stagger: 0.05 })
// TLAnim.to(wipe, {left: '0%', ease: "power2.out", duration: 0.5});
await delay(1500);
done();
},
enter() {
// TLAnim
// .to(wipe, {left: '100%', ease:"power2.in", duration: 0.5})
// .set(wipe, {left: '-100%'})
TLAnim
.to(allBandes, { height: '0%', stagger: 0.05 })
}
}
]
})