Hassan

HHassan

·

the animation doesn't work as expected

Hi everyone, I have this problem with layout356 the animation don't work in the right way, any idea?

1 comment

W

HHassan

·

Setting Up T.ricks Barba.js Page Interaction

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

1 comment

M

HHassan

·