Page Transition on Browser Buttons

Design help Custom code
1

Hey!

I’ve implemented this code that animates page transition effect. However, I can’t achieve the same effect when user clicks on a back/forward button natively in browser. I’ve tried multiple times with GPT but none of it worked.

This code was derived from this article, with some ChatGPT to use it in Webflow
(note: I know almost nothing about coding).

Besides making it respond to back/forward in browser this works almost right.

Please, can someone help?

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", function () {
    const links = document.querySelectorAll("a"); // Select all links
    const transitionSlide = document.createElement("div");
    transitionSlide.classList.add("transition-slide");
    document.body.appendChild(transitionSlide);

    // Create a dark overlay that will fade in
    const darkOverlay = document.createElement("div");
    darkOverlay.classList.add("dark-overlay");
    document.body.appendChild(darkOverlay);

    gsap.set(".transition-slide", { y: "100vh", display: "none" });
    gsap.set(".dark-overlay", { opacity: 0 });

    // Function to reset styles on page load (Fixes Back Button Issues)
    function resetPageStyles() {
      gsap.set([".section", ".footer-non-clickable", ".footer", ".utility-page-wrap", ".section-404"], {
        clearProps: "all" // Removes all inline GSAP styles
      });
      gsap.set(".dark-overlay", { opacity: 0 });

      // Hide transition slide when navigating back
      gsap.set(".transition-slide", { y: "100vh", display: "none" });
    }

    resetPageStyles(); // Run when page loads

    links.forEach(link => {
      link.addEventListener("click", function (event) {
        let href = this.getAttribute("href");

        // Skip animation for external links or links with target="_blank"
        if (this.target === "_blank" || this.hasAttribute("rel")) {
          return; // Let them open normally
        }

        // Prevent default navigation for animated transitions
        event.preventDefault();

        if (href && href !== "#") {
          // Exit animation: Shrink and darken the specific elements
          gsap.to([".section", ".footer-non-clickable", ".footer", ".utility-page-wrap", ".section-404"], {
            scale: 0.8,
            y: -300,
            duration: 1.2,
            ease: "power4.inOut"
          });

          // Darken the page with an overlay
          gsap.to(".dark-overlay", {
            opacity: 0.8,
            duration: 1.2,
            ease: "power4.inOut"
          });

          // Transition slide moves up (fully visible)
          gsap.to(".transition-slide", {
            y: 0,
            duration: 1.2,
            ease: "power4.inOut",
            onStart: () => {
              transitionSlide.style.display = "block";
            },
            onComplete: () => {
              window.location.href = href;
            }
          });
        }
      });
    });

    // Listen for back navigation & reset styles
    window.addEventListener("pageshow", function (event) {
      resetPageStyles();
    });
  });
</script>

<style> /* Page transition */
.dark-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8); /* Dark overlay */
  z-index: 9998; /* Below the transition slide */
  pointer-events: none;
}
</style>

Here is my site Read-Only: LINK
Here is my Live Site link: LINK