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 })
                    
            }
            
        }
    ]

})