Relume Community Icon
Relume Community
  • 🏠Home
  • 📅Events

  • 🔵Announcements
  • 🔵General
  • 🔵Getting Started
  • 🔵Issues
  • 🔵Showcase

Powered by Tightknit
\n\n","url":"/x/issues/87gxzd83qmmp/troubleshooting-tricks-barbajs-page-interaction-is","author":{"@type":"Person","name":"Hassan","url":"/user/bd800750-c98a-4b5a-9301-59b7b80e8b89"},"datePublished":"2025-06-12T09:37:40.216002+00:00","dateModified":"2025-06-12T21:18:05.71838+00:00","interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},"comment":[{"@type":"Comment","text":"Hassan yeah unfortunately I don't really know anything about this. Maybe somebody else in the community does?","author":{"@type":"Person","name":"Matt J.","url":"/user/11a88c24-8014-4636-87bf-5b00473e35ac"},"datePublished":"2025-06-12T21:18:05.71838+00:00","dateModified":"2025-06-12T21:18:09.744358+00:00","interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}}]}
Issues
Issues

Troubleshooting T.RICKS Barba.js Page Interaction Issues

Avatar of HassanHassan
·

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>

1 comment

  • Avatar of Matt J.
    Matt J.
    ·

    Hassan yeah unfortunately I don't really know anything about this. Maybe somebody else in the community does?

    🙏1