• To avoid flicker, the transition should be one of the first elements on the page.
• The transition component should be a direct child of the body.
• We can replace "body >:not(.transition-4_component)" in the code with the class of your page content that should animate down such as ".page_wrapper"

<style>
html:not(.transition-4-first-visit).w-mod-js .transition-4_component {
	display: flex;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script>
if (!sessionStorage.getItem("transition-4-first-visit")) {
	sessionStorage.setItem("transition-4-first-visit", "viewed");
	document.documentElement.classList.add("transition-4-first-visit");
}
document.addEventListener("DOMContentLoaded", () => {
	document.querySelectorAll(".transition-4_component").forEach((component) => {
		if (component.hasAttribute("data-transition-4")) return;
		component.setAttribute("data-transition-4", "");

		document.addEventListener("click", (e) => {
      const link = e.target.closest("a");
			if (!link) return;
			const currentUrl = link.href;
			if (link.hostname !== window.location.host || currentUrl.includes("#") || link.target === "_blank") return;
			e.preventDefault();
			let tl = gsap.timeline({
				defaults: {
					duration: 0.7,
					ease: "power1.inOut"
				},
				onComplete: () => window.location.href = currentUrl
			});
			tl.set(component, { display: "flex", opacity: 1 });
			tl.fromTo(".transition-4_panel", { yPercent: 100 }, { yPercent: 0 });
			tl.fromTo("body >:not(.transition-4_component)", { y: "0vh", opacity: 1 }, { y: "-50vh", opacity: 0 }, "<");
		});
		window.onpageshow = e => e.persisted && window.location.reload();

		if (document.documentElement.classList.contains("transition-4-first-visit")) return;
		let tl = gsap.timeline();
		tl.set(component, { display: "flex" });
		tl.fromTo(component, { opacity: 1 }, { opacity: 0, delay: 0.4 });
		tl.set(component, {display: "none"});

	});
});
</script>