script.js

/*
make a rectangle and when we move mouse on that rectangle on
the left side we want to gradually change the color of the
rectangle rectangle to red and when we move mouse to the
right side we want to change the color to blue.
*/

/*
1 sabse pahle ye pata karo ke mouse rectangle par aaya and move hua ya nahi
2 ab ye calculate karo ki hum center se left par hai ye right side par hai
3. ab ye pata karo ke hum center se kitna left side par hai ye right side par hai uske bad utni hi intensity se coor
lagao
*/

/*
1. fist of all find out that mouse is on the rectangle and moved or not.
2. now calculate that we are on the left side of the center or on the right side of the center.
3. now find out how much we are on the left side or on the right side of the center and then apply the color with the same intensity.
*/

// selection oḟ center div
var rect = document.querySelector(".center");

// code for mouse on the center div rectangle
rect.addEventListener("mousemove", function (mousePosition) {

    var rectlocation = rect.getBoundingClientRect(); // getBoundingClientRect() method returns the size of an element and its position relative to the viewport.

    var rectlocationval = mousePosition.clientX - rectlocation.left; // mousePosition.clientX gives the horizontal coordinate of the mouse pointer when the mouse event was triggered.

    if (rectlocationval < rectlocation.width / 2) { // if mouse is on left side of the rectangle

        redcolor = gsap.utils.mapRange(rectlocation.width / 2, 0, 0, 255, rectlocationval); // mapRange() method maps a value from one range to another range.

        gsap.to(rect, {

            backgroundColor: `rgb(${redcolor},0,0)`,
            ease: Power4.easeOut
        })
    }
    else {

        BlueColor = gsap.utils.mapRange(rectlocation.width / 2, rectlocation.width, 0, 255, rectlocationval);

        gsap.to(rect, {

            backgroundColor: `rgb(0,0,${BlueColor})`,
            ease: Power4.easeOut

        })
    }
})

// code for mouseleave

rect.addEventListener("mouseleave", function () {

    gsap.to(rect, {

        backgroundColor: "white",
        ease: Power4.easeOut
    })
})