GSAP 3D Rotate Image Cover based on mouse position

gistfile1.txt

function animateBannerimage3D() {

    const container = document.querySelector(".image-container");
    const image = document.querySelector(".rotate-image");
    let isHovered = false;

    // Initial transform settings
    const initialTransform = {
        perspective: "1000px",
        rotateY: "0deg",
        rotateX: "0deg",
        scale: 1,
    };


    container.addEventListener("mouseleave", () => {
        resetRotation();
    });

    container.addEventListener("mousemove", (event) => {
            const containerRect = container.getBoundingClientRect();
            const mouseX = event.clientX - containerRect.left - containerRect.width / 2;
            const mouseY = event.clientY - containerRect.top - containerRect.height / 2;
            const rotationY = (mouseX / containerRect.width) * 20; // Adjust the sensitivity
            const rotationX = -(mouseY / containerRect.height) * 20; // Adjust the sensitivity

            gsap.to(image, {
                duration: 0.3,
                transformOrigin: "center center", // Center the rotation
                transform: `perspective(1000px) rotateY(${rotationY}deg) rotateX(${rotationX}deg) scale(1.1)`,
            });

    });

    function resetRotation() {
        gsap.to(image, {
            duration: 0.3,
            transformOrigin: "center center", // Center the rotation
            perspective: "1000px",
            rotateY: "0deg",
            rotateX: "0deg",
            scale: 1,
        });
    }
};