Creé una demostración mínima y, como puede ver, la página interna no está cargando el JS y CSS de Locomotive y también el carrusel OWL si el usuario hace clic en el texto del encabezado en la página de inicio y navega a la página interna. Pero si el usuario actualiza la página interna, tanto la locomotora como el carrusel de búhos funcionan bien. ¿Cómo arreglar esto? He agregado el cambio sugerido al archivo JS ( https://bootstrap-awesome.com/barba-test1f/js/main-test.js )

Cualquier ayuda sería muy apreciada.

Enlace de demostración: 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)