Vanta.js not reloading after GSAP & Barba JS transition

Question

Ok so I got a Vanta.js background running in my <main> which looks awesome. Then I introduced a page transition using Barba and GSAP for animations, which are working fine too. But after going back to my index I found that VantaJS isn't loading again. There are very few questions about Barba and even less answered correctly.

Here's what I've tried until now:

• Use window.onload with appendChild to add the vanta libraries each time.
• Use Barba hooks to reload the libraries on "after" hook.
• Send all scripts to the bottom of my html in correct order.

Here are some SO questions I've used as example:

How to reinit custom js files between pages (Barba.js)?

Scripts are not loading after the page transition in Barba.jS

JS content not working after a page transition using Barba.JS

No luck implementing any of these.

I'm open to other transition libraries if you think that Barba is the problem definitely.

Edit #1 So I found my same issue on BarbaJS Github so I tried implementing this inside my barba.init but still no luck:

  async beforeEnter(data) {
                    const nextEl = data.next.container;
                    if (nextEl) { //Just a little check to make sure we don't run this on an error
                        // Find all scripts in the next container
                        const nextScripts = nextEl.querySelectorAll('script');

                        //Iterate over incoming script tags
                        nextScripts.forEach(nextScript => {
                            const src = nextScript.src;
                            //Duplicate check - no need to re-execute scripts that are already loaded.
                            if (document.head.querySelector('script[src="' + src + '"]') == undefined) {

                                //Have to create a new script element in order for the browser to execute the code
                                const newScript = document.createElement('script');
                                newScript.src = src;
                                newScript.async = true;
                                document.head.append(newScript);

                                nextScript.remove(); // Cleaning up the script in the container;
                            }
                        })
                    }
                },

Edit #2 An attempt loading inline script (that's the way VantaJS is loaded) but for obvious reasons VANTA isn't defined because I'm calling in from an external js file.

window.Barba.currentInlineScripts = [
    VANTA.HALO({
        el: "#vanta-canvas",
        mouseControls: true,
        touchControls: true,
        gyroControls: true,
        xOffset: 0.18,
        scale: window.devicePixelRatio,
        scaleMobile: 1.00,
        backgroundColor: 0x0A0613,
        baseColor: 0x2280D0
    })
]

$(function () {
    barba.init({
        sync: true,

        transitions: [
            {

                afterLeave({
                    current,
                    next
                }){
                    if (next.container) {
                        // Remove old scripts appended to the head
                        window.Barba.currentInlineScripts.forEach((currentInlineScript) => {
                            currentInlineScript.remove()
                        })
        
                        // Find all new scripts in the next container
                        const nextScripts = next.container.querySelectorAll('script');
        
                        // Iterate over new scripts
                        nextScripts.forEach((script) => {
                            // Check if it is an inline script
                            if (!script.src) {
                                // Clone the original script
                                const newScript = script.cloneNode(true)
                                // Create a new <script> element node
                                const newNode = document.createElement('script');
                                // Assign it innerHTML content
                                newNode.innerHTML = newScript.innerHTML
                                // Append to the <head>
                                const element = document.head.appendChild(newNode)
                                // Save for later
                                window.Barba.currentInlineScripts.push(newNode)
                            }
                            // Remove the inline script
                            script.remove()
                        })
                    }
                },

                async leave(data) {
                    const done = this.async();

                    pageTransition();
                    await delay(1000);
                    done();
                },

                async enter(data) {
                    contentAnimation();
                },

                async once(data) {
                    contentAnimation();
                },
            },
        ],
    });
});