<script src=”https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js”></script>
<script>
document.addEventListener(“DOMContentLoaded”, function () {
function setupTransitionEffect(containerClass) {
const imageLink = document.querySelector(`.${containerClass} a`);

if (imageLink) {
imageLink.addEventListener(“click”, function (event) {
event.preventDefault(); // Prevent instant navigation
let targetUrl = imageLink.href; // Get link from Elementor

const image = imageLink.querySelector(“img”);
const rect = image.getBoundingClientRect();

// **Create a clone of the clicked image for animation**
const clonedImage = image.cloneNode(true);
document.body.appendChild(clonedImage);

// **Calculate viewport center**
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;
const centerX = viewportWidth / 2;
const centerY = viewportHeight / 2;

// **Calculate image’s current center position**
const imageCenterX = rect.left + rect.width / 2;
const imageCenterY = rect.top + rect.height / 2;

// **Calculate how much to move the image**
const translateX = centerX – imageCenterX;
const translateY = centerY – imageCenterY;

// **Apply base styles to the clone**
gsap.set(clonedImage, {
position: “fixed”,
top: rect.top + “px”,
left: rect.left + “px”,
width: rect.width + “px”,
height: rect.height + “px”,
zIndex: 9999,
objectFit: “cover”,
transformOrigin: “center center”,
willChange: “transform”,
opacity: 1
});

// Hide the original image to prevent layout shift
image.style.opacity = “0”;

// **GSAP Animation: Move to center, scale slightly, then expand**
gsap.timeline()
.to(clonedImage, {
x: translateX,
y: translateY,
scale: 1.2, // Small scale-up while moving
duration: 0.6,
ease: “power2.out”
})
.to(clonedImage, {
scale: Math.max(viewportWidth / rect.width, viewportHeight / rect.height), // Expand fully
duration: 0.8,
ease: “power4.inOut”,
onComplete: function () {
window.location.href = targetUrl; // Navigate after animation
}
});
});
}
}

// Apply effect to all images
setupTransitionEffect(“transition-image-1”);
setupTransitionEffect(“transition-image-2”);
setupTransitionEffect(“transition-image-3”);

// Ensure hard refresh on “Back” to reset everything properly
window.addEventListener(“pageshow”, function (event) {
if (event.persisted) {
console.log(“Page was loaded from cache. Reloading to reset styles…”);
window.location.reload();
} else {
console.log(“Page fully loaded normally.”);
}

// Reset styles for all images
const images = document.querySelectorAll(“.transition-image-1 img, .transition-image-2 img, .transition-image-3 img”);
images.forEach((image) => {
if (image.dataset.originalStyle) {
image.style.cssText = image.dataset.originalStyle; // Restore original styles
}
});
});
});
</script>