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 ๐Ÿš€๐ŸŽจ

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)