I have created a minimal demo and as you can see that inner page is not loading the JS and CSS of Locomotive and also OWL carousel if user clicks on heading text on homepage and navigate to inner page. But if user refresh the inner page then both locomotive & owl carousel are working fine. How to fix this? I have added the suggested change to the JS file (https://bootstrap-awesome.com/barba-test1f/js/main-test.js)

Any help would be highly appreciated.

Demo Link: https://bootstrap-awesome.com/barba-test1f/index-test.html

jQuery.noConflict();
(function($){


 function projdetailpage_leaveAnimation() {
    const tl = gsap.timeline();
    tl.to('.slide_head', 1, {y:'50%', opacity:0, ease: 'Power2.easeOut'});
    
    }

  function projdetailpage_enterAnimation() {
      const tl = gsap.timeline();
        tl.to('.slide_head h1', 1, {y:'-30%', ease: 'power4.out'});
     
    }

    barba.init({

 views: [{
    namespace: 'home',
    beforeEnter({ next }) {
      // Script URLs to load
      let pageScriptSrcs = [
        'https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.min.js',
        'js/custom-scroll.js',
        'js/owl/owl.carousel.js',
        'js/owl/owl-custom.js'
      ]
      
      pageScriptSrcs.forEach(scriptSrc => {
        let script = '<script src="' + scriptSrc + '"><\/script>';
        console.log(script);
        next.container.appendChild(script);
      })
    },
  }],


      transitions: [{
        name: 'projdetailpage transition',
        from: {
          namespace: ['home']
        },
        to: {
          namespace: ['projdetailpage']
        },
        enter() {
          projdetailpage_enterAnimation();
        },
        leave() {
          const done = this.async();
          projdetailpage_leaveAnimation();
          setTimeout(function() {
            done();
          }, 1000);
               
        }
        

      }]
    });

  })(jQuery)