How to Create a Custom Cursor Animation Using GSAP


Animating a custom cursor can enhance the user experience and add an interactive touch to any website. Using GSAP (GreenSock Animation Platform), we can make a dynamic cursor that smoothly follows mouse movements, interacts with other elements on the page, and adds creative flair. In this tutorial, we’ll go through the process step by step and implement extra features, such as scaling the cursor when hovering over images, while also using an overlay to maintain smooth interactions. So,

Welcome to Code Cluster,

Let’s dive right into it

Watch what we are going to make today:—Click Me!


Getting Started: Setting Up the Project

First, create three essential files: index.html, styles.css, and script.js. In the HTML file, we’ll include the basic structure of the page and the GSAP CDN link to handle the animations.

Step 2: Creating the Custom Cursor

Now, let’s create a div element for the custom cursor (You are free to use any id name of your choice). This cursor will be a small circle, 20x20 pixels in size, with a white background and a 50% border radius to make it circular. Make sure to position it as fixed, so it follows the screen even when you scroll. By positioning it as fixed, the cursor will always be visible, and its movements won’t be affected by scrolling.

In your index.html, create a div for the custom cursor. This is how you define the cursor's appearance.

html

<div id="cursor"></div>

In styles.css, style the #cursor as a small circle with a 20px height and width, and position it as fixed so it always stays visible.

css



#cursor {
  width: 20px;
  height: 20px;
  background-color: white;
  border-radius: 50%;
  position: fixed;
}




Step 3: Structuring the Main Layout

Next, create another div called #main, which will sit below the cursor.  Set this div to take up 100% of the viewport width and height. This will serve as the main container of your content, and we’ll center its children using Flexbox properties for a clean, centered layout.

In the index.html, create a div called #main, which will serve as the main container for the page.
html

<div id="main"></div>

css
#main {
  width: 100%;
  height: 100vh;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
}
This makes sure your main content is centered and the background is set to black.

Step 4: Accessing the Elements with JavaScript
In your script.js, use document.querySelector to select both the #main and #cursor  elements  
and assign them to variables. This will allow you to manipulate them later in the script.

const main = document.querySelector("#main");
const cursor = document.querySelector("#cursor");



Step 5: Tracking Mouse Movements
To track the mouse's position, we will add an event listener to the #main element. Listen for the mousemove event and pass in a function that retrieves the mouse's x and y coordinates. You can check if the coordinates are logged correctly by using console.log(dets.x) and console.log(dets.y) to see the values in the console.

main.addEventListener("mousemove", function (dets) {
  console.log(dets.x, dets.y); 
});

This will log the x and y coordinates of the mouse as it moves across the screen.

Step 6: Moving the Cursor Using GSAP
Now that you have the cursor’s coordinates, it’s time to move the custom cursor dynamically. This is where GSAP comes in! Use gsap.to to animate the cursor’s position from its current state to the new coordinates (dets.x and dets.y) whenever the mouse moves. This will give the cursor a smooth and seamless following motion.
main.addEventListener("mousemove", function (dets) {
  gsap.to(cursor, {
    x: dets.x,
    y: dets.y,
    duration: 0.3
  });
});


Step 7: Adding Smooth Movement
To make the movement smoother, you can add more duration to the gsap.to method. This ensures that the custom cursor doesn’t instantly jump to the new position but rather glides there smoothly, following the mouse’s movement.
If you want to enhance the smoothness further, you can explore easing functions to control the speed and style of the animation. Easing makes the movement feel more natural.

Step 8: Adding an Image for Interaction
Now, let’s introduce an image for interaction. Create a new div with the ID #image inside the #main container. This div will hold an image that you can choose. Set its size using vw (viewport width) units, making it responsive to screen size.
Within this #image div, also create a child div with the ID #overlay. This will be used later to manage cursor and image interactions.
<div id="image">
    <div id="overlay"></div>
    <img src="imageurl" alt="An image" />
</div>

In styles.css

#image {
  width: 70vw;
  height: 30vw;
  position: relative;
}
#image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
Step 9: Cursor Scaling on Image Hover
Here’s where the fun begins! When the user hovers over the image, we’ll make the custom cursor scale up to twice its size. To do this, add an event listener for the mouseenter event on the image. When triggered, use gsap.to to scale the cursor to 2. This will make the cursor visually grow when hovering over the image.
When the cursor leaves the image (mouseleave event), scale it back down to its original size (1). This adds interactivity and makes the website feel more engaging.

const image = document.querySelector("#image");

image.addEventListener("mouseenter", function () {
  gsap.to(cursor, { 
    scale: 2, 
    duration: 0.3 
  });
});

image.addEventListener("mouseleave", function () {
  gsap.to(cursor, { 
    scale: 1, 
    duration: 0.3 
  });
});
Now, when the cursor enters the image, it will grow, and when it leaves, it will shrink back to its normal size. The duration is added to make it more smooth rather than just growing and shrinking instantly.
Step 10: Solving the Scaling Issue with an Overlay
You may notice that when the cursor scales up, it quickly shrinks back down before fully leaving the image (Kinda like flickering). This happens because the enlarged cursor comes between the image and the mouse pointer, cutting off the hover effect.
To fix this, we have already introduced the #overlay div. Heres how it will work. This transparent layer will sit between the image and the cursor, preventing the cursor from overlapping the image. By placing the image at the bottom, the cursor in the middle, and the overlay on top, we ensure smooth interaction.
To make the #overlay work as intended, set its height and width to 100% so that it covers the entire image. The background should be transparent to allow the image behind it to remain visible. Make the overlay absolute, but ensure the #img container is positioned relative so that the overlay remains within its bounds.


#overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
}

Step 11: Polishing the Cursor Behavior
Lastly, tweak the z-index values to control the stacking order. Set the cursor’s z-index to 9 and the overlay’s to 10. This ensures that the cursor is always visible, and the overlay takes priority when interacting with the image.
#cursor {
  width: 20px;
  height: 20px;
  background-color: white;
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 9;
}
#overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  z-index: 10;
}
Step 12: Final Touches
As a final touch, when hovering over the image, you can change the inner content of the custom cursor by updating its innerHTML. For instance, you could display a message like "View More" inside the cursor circle when hovering over the image. Also, adjust the font size and color in CSS to match your design.
You can further customize the hover behavior by changing the cursor’s background color and border during the hover effect and restoring them when the cursor leaves the image.

image.addEventListener("mouseenter", function () {
  cursor.innerHTML = "View More";
  gsap.to(cursor, {
    scale: 2,
    backgroundColor: "rgba(180, 172, 172, 0.393)",
    border: "0.3px solid red",
    duration: 0.3
  });
});

image.addEventListener("mouseleave", function () {
  cursor.innerHTML = "";
  gsap.to(cursor, {
    scale: 1,
    backgroundColor: "white",
    duration: 0.3
  });
});

You can get Source code here:- GitHub

Congratulations! You've just created an amazing custom cursor animation using GSAP!
Thank you for following along and taking the time to build something interactive and engaging. 🎉
Remember, every small project like this brings you closer to mastering the skills needed to create even more advanced and exciting websites. You’ve learned how to combine animations, scaling, and smooth transitions — these are powerful techniques that you can apply to countless future projects.
But don’t stop here! This is just the beginning. There’s so much more to explore and experiment with. I hope this blog helped you feel more confident and inspired. Keep revisiting this site for more tutorials, tips, and ideas that will help you take your web development game to the next level. I’m excited to see what you’ll create next!
Happy coding! 🚀 If you enjoyed this, don’t forget to share your project and drop by again for more cool projects. Let's continue growing together! 😊



                                                                                                               - Post By,
                                                                                                                      Gulshan Kumar,
                                                                                                                      ISE, 2nd Year (2024)


Comments

Post a Comment

Popular posts from this blog

Creating an Animated Navbar with GSAP

In this blog, we'll walk you through creating an animated navbar using GSAP (GreenSock Animation Platform). GSAP is a powerful JavaScript animation library that makes it easy to create smooth and professional animations with minimal effort. Today, we'll build a fully functional, animated navbar that slides in from the right when you click a menu icon and slides out when you click a close button. By the end of this guide, you'll understand how to create animation sequences with GSAP and control them with JavaScript. Let’s get started! You can check out the Source Code in the Github:- Click Here Why GSAP for Animations? When creating dynamic user interfaces, adding smooth animations can greatly enhance the user experience. GSAP offers: Powerful performance across all devices and browsers. Simple syntax for creating complex animations. Flexibility to animate almost any aspect of your web page. Using GSAP, you can easily manage the timing, sequencing, and interactivity of your ...
Read more

Mastering Java: Key Concepts, Architecture, and Buzzwords Explained

Image
  Java Buzzwords - Core Characteristics You Should Know Java stands out in programming for its unique set of features or "buzzwords" that make it a popular language across the globe. Let’s dive into what makes Java so special: Simple - Java’s design keeps things easy. It follows similar syntax to C/C++ but skips complex things like pointers, structs, and typedefs. Plus, it’s got automatic garbage collection, meaning you don’t have to worry about managing memory.  Portable - Java programs can run anywhere that has a JVM (Java Virtual Machine). Thanks to bytecode (an intermediate form of the code), Java is "write once, run anywhere." Object-Oriented (OO) - Java is all about objects and classes, which package data (attributes) and functions (methods). With its support for object-oriented principles like Abstraction, Encapsulation, Inheritance, and Polymorphism, Java structures programs in a way that’s clean and organized. Robust - With Java, programs are stable and...
Read more