HELP!! โ
I'm trying to set up T.RICKS Barba.js page interaction, and it is working. However, when I try to reset and initialize my code again, it's not working. I've added the [data-barba-script]
attribute to all my script tags, and some are working while some are not. Do you have any idea why?
<script src="<a target="_blank" rel="noopener noreferrer" href="https://cdn.jsdelivr.net/npm/@barba/core@2.9.0/dist/barba.umd.min.js">https://cdn.jsdelivr.net/npm/@barba/core@2.9.0/dist/barba.umd.min.js</a>"></script> <script src="<a target="_blank" rel="noopener noreferrer" href="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js">https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js</a>"></script> <script> function resetWebflow(data) { let dom = $(new DOMParser().parseFromString(data.next.html, "text/html")).find("html"); // reset webflow interactions $("html").attr("data-wf-page", dom.attr("data-wf-page")); window.Webflow && window.Webflow.destroy(); window.Webflow && window.Webflow.ready(); window.Webflow && window.Webflow.require("ix2").init(); // reset w--current class $(".w--current").removeClass("w--current"); $("a").each(function () { if ($(this).attr("href") === window.location.pathname) { $(this).addClass("w--current"); } }); // reset scripts dom.find("[data-barba-script]").each(function () { let codeString = $(this).text(); if (codeString.includes("DOMContentLoaded")) { let newCodeString = codeString.replace(/window\.addEventListener\("DOMContentLoaded",\s*\(\s*event\s*\)\s*=>\s*{\s*/, ""); codeString = newCodeString.replace(/\s*}\s*\);\s*$/, ""); } let script = document.createElement("script"); script.type = "text/javascript"; if ($(this).attr("src")) script.src = $(this).attr("src"); script.text = codeString; document.body.appendChild(script).remove(); }); } barba.hooks.enter((data) => { gsap.set(data.next.container, { position: "fixed", top: 0, left: 0, width: "100%" }); }); barba.hooks.after((data) => { gsap.set(data.next.container, { position: "relative" }); $(window).scrollTop(0); resetWebflow(data); }); barba.init({ preventRunning: true, transitions: [ { sync: true, enter(data) { let tl = gsap.timeline({ defaults: { duration: 1, ease: "power2.out" } }); tl.to(data.current.container, { opacity: 0, scale: 0.9 }); tl.from(data.next.container, { y: "100vh" }, "<"); return tl; } } ] });
yeah unfortunately I don't really know anything about this. Maybe somebody else in the community does?