Community forum for knowledge and support

Updated 6 months ago

Setting Up T.ricks Barba.js Page Interaction

At a glance

The community member is having trouble setting up Barba.js page interaction. They have added the [data-barba-script] attribute to all their script tags, but some are working while others are not. The community member has included the necessary scripts for Barba.js and GSAP, and has provided a resetWebflow() function to reset Webflow interactions and scripts. However, they are still experiencing issues when trying to reset and initialize the code again.

Another community member has responded, saying they don't have any knowledge about this issue, and suggesting that someone else in the community might be able to help.

Useful resources

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;
      }
    }
  ]
});

M
1 comment

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

Add a reply
Sign up and join the conversation on Slack