DEV Community

Cover image for Day 4: Enhancing UX with a Custom Cursor Using GSAP πŸš€πŸŽ¨
Ashish prajapati
Ashish prajapati

Posted on

1

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! πŸŽ‰

Neon image

Set up a Neon project in seconds and connect from a Next.js application

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Get started β†’

Top comments (0)

Image of Stellar post

Check out Episode 1: How a Hackathon Project Became a Web3 Startup πŸš€

Ever wondered what it takes to build a web3 startup from scratch? In the Stellar Dev Diaries series, we follow the journey of a team of developers building on the Stellar Network as they go from hackathon win to getting funded and launching on mainnet.

Read more

πŸ‘‹ Kindness is contagious

Engage with a wealth of insights in this thoughtful article, valued within the supportive DEV Community. Coders of every background are welcome to join in and add to our collective wisdom.

A sincere "thank you" often brightens someone’s day. Share your gratitude in the comments below!

On DEV, the act of sharing knowledge eases our journey and fortifies our community ties. Found value in this? A quick thank you to the author can make a significant impact.

Okay