Troubleshooting T.RICKS Barba.js Page Interaction Issues
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="https://cdn.jsdelivr.net/npm/@barba/core@2.9.0/dist/barba.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></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;
}
}
]
});
</script>
