DEV Community

Cover image for Day 4: Enhancing UX with a Custom Cursor Using GSAP 🚀🎨
Ashish prajapati
Ashish prajapati

Posted on

Day 4: Enhancing UX with a Custom Cursor Using GSAP 🚀🎨

#gsap #webdev #javascript #beginners

Today's GSAP adventure brought me closer to creating an engaging and interactive custom cursor experience for the web. Instead of sticking to the default cursor, I designed a cursor that dynamically adapts based on user interactions and provides context-aware feedback.

🎨 Demo and Code

🖱️ Features Implemented

  1. Dynamic Cursor Movement: The cursor smoothly follows the user's mouse movements.
  2. Hover Interactions: When hovering over a specific element (an image in this case), the cursor transforms with a message ("View More") and visual feedback.
  3. GSAP Animations: Every interaction is powered by GSAP for fluid and polished animations.

🔍 HTML Structure

The HTML defines the layout with a main content area, an image, and a custom cursor element:

<div id="cursor"></div>
<div id="main">
    <div id="image">
        <div id="overlay"></div>
        <img src="./bg-img.jpg" alt="">
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

🎨 CSS Styling

The styles ensure the cursor and content appear visually appealing:

body {
    margin: 0;
    font-family: Arial, sans-serif;
    overflow: hidden;
}

#main {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

#image {
    position: relative;
    width: 300px;
    height: 300px;
    overflow: hidden;
}

#image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#cursor {
    position: fixed;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    color: #000;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
}
Enter fullscreen mode Exit fullscreen mode

💻 JavaScript with GSAP

The GSAP-powered script drives the interactivity:

var main = document.querySelector("#main");
var cursor = document.querySelector("#cursor");
var imgDiv = document.querySelector("#image");

// Cursor follows mouse movement
main.addEventListener("mousemove", function (dets) {
    gsap.to(cursor, {
        x: dets.x,
        y: dets.y,
        duration: 1,
        ease: "power2.out"
    });
});

// Cursor hover effects on image
imgDiv.addEventListener("mouseenter", function () {
    cursor.innerHTML = "View More"; // Add hover text
    gsap.to(cursor, {
        scale: 2,
        backgroundColor: "#e9e9e957",
        color: "#fff"
    });
});

imgDiv.addEventListener("mouseleave", function () {
    gsap.to(cursor, {
        scale: 1,
        backgroundColor: "#fff",
        color: "#000"
    });
});
Enter fullscreen mode Exit fullscreen mode

🚀 How It Works

  1. Mouse Tracking: The mousemove event updates the cursor's position using GSAP's to method, which ensures smooth transitions with a duration and easing function.
  2. Hover Effects:
    • On mouseenter, the cursor expands, changes color, and displays text ("View More").
    • On mouseleave, the cursor reverts to its original style.

💡 Lessons Learned

  • GSAP for Cursor Animation: Leveraging GSAP's to method for animating position, size, and styling.
  • CSS Customization: Styling the cursor for aesthetic appeal while maintaining functionality.
  • Event-Driven Interactions: Using mouseenter and mouseleave to trigger visual changes on hover.

🌟 What’s Next?

  • Adding scroll-triggered animations to integrate the custom cursor with other interactive elements.
  • Experimenting with more advanced cursor shapes and animations, such as particle effects or trailing elements.
  • Expanding the project to include multiple interactive areas with distinct cursor behaviors.

Creating a custom cursor was an exciting step in understanding the blend of creativity and technical skills GSAP offers. I’m thrilled to explore more and share the journey. Try it out and let me know your thoughts! 🎉

Top comments (0)