<script src=”https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js”></script>

<script>
document.addEventListener(“DOMContentLoaded”, function () {
// Create floating image container
const imageHolder = document.createElement(“div”);
imageHolder.classList.add(“image-holder”);
imageHolder.innerHTML = ‘<img src=”” alt=”hover-image”>’;
document.body.appendChild(imageHolder);
const imageElement = imageHolder.querySelector(“img”);

// Image Mapping (Different images for each word) Remeber to add “,” after each link, but NOT on the last one.
const imageMap = {
“NAME”: “LINK”,
“NAME”: “LINK”
};

// Reset Scale Before Showing New Image
function resetScale() {
gsap.set(imageHolder, { scale: 0.16, skewX: 0, skewY: 0 });
}

// Mouse Move: Center Image on Cursor & Smooth Skew Effect
document.addEventListener(“mousemove”, (e) => {
const imageWidth = 0;
const imageHeight = 0;

gsap.to(imageHolder, {
x: e.clientX – imageWidth,
y: e.clientY – imageHeight,
skewX: (e.movementX || 0) * 0.8,
skewY: (e.movementY || 0) * 0.8,
duration: 0.1,
ease: “power2.out”
});

// Reset skew when mouse stops moving
clearTimeout(window.skewReset);
window.skewReset = setTimeout(() => {
gsap.to(imageHolder, { skewX: 0, skewY: 0, duration: 0.3, ease: “power2.out” });
}, 100);
});

// Hover Effect for Each Word
document.querySelectorAll(“.hover-trigger”).forEach(trigger => {
trigger.addEventListener(“mouseenter”, () => {
resetScale(); // Reset scale before showing new image

// Determine which word is hovered and set the correct image
for (let key in imageMap) {
if (trigger.classList.contains(key)) {
imageElement.src = imageMap[key];
break;
}
}

// Show and scale up the image
gsap.to(imageHolder, {
opacity: 1,
scale: 1.3,
duration: 0.3,
ease: “power2.out”
});
});

trigger.addEventListener(“mouseleave”, () => {
// Hide and reset image
gsap.to(imageHolder, {
opacity: 0,
scale: 0.16,
skewX: 0,
skewY: 0,
duration: 0.3,
ease: “power2.out”
});
});
});
});
</script>