Animated Custom cursor using gsap

animated cursor using gsap
animated cursor

You can use GSAP (GreenSock Animation Platform) to create an animated cursor with a scale effect on link hover. First, make sure you include the GSAP library in your project. You can do this by including it from a CDN or by installing it through npm.

Here’s an example of HTML, CSS, and JavaScript code to create a GSAP animated cursor with a scale effect on link hover:

1- Include the Gsap script file cdn into html script tag:
https://unpkg.com/gsap@3.9.2/dist/gsap.min.js
2- HTML Code
<!--:Cursor:-->
<div class="cursor"></div>

<!--:Link hover:-->
<a href="#" class="link">Hover me</a>
3- Add Javascript Code
const cursor = document.querySelector(".cursor");
const links = document.querySelectorAll("a");
gsap.set(cursor, { xPercent: -50, yPercent: -50 });

links.forEach((link) => {
  link.addEventListener("mouseenter", () => {
    gsap.to(cursor, { scale: 2 });
  });
  link.addEventListener("mouseleave", () => {
    gsap.to(cursor, { scale: 1 });
  });
});
document.addEventListener("mousemove", (e) => {
  gsap.to(cursor, { x: e.clientX, y: e.clientY });
});
4- Add Css 
@import url("https://fonts.googleapis.com/css2?family=Rethink+Sans:wght@400..800&display=swap");
* {
  box-sizing: border-box;
}
body {
  background-color: white;
  margin: 0;
  padding: 2rem;
  font-size: 1rem;
  line-height: 1.6;
  font-family: "Rethink Sans", sans-serif;
  overflow: hidden;
}
.link {
  display: block;
  padding: 8px 18px;
  border-radius: 8px;
  text-transform: capitalize;
  width: 120px;
  text-align: center;
  background-color: #0057ff;
  text-decoration: none;
  color: #fff;
}
.cursor {
  display: block;
  z-index: 9999;
  position: fixed;
  left: 0;
  top: 0;
  width: 12px;
  height: 12px;
  background-color: white;
  border-radius: 50%;
  pointer-events: none;
  transform-origin: center;
  mix-blend-mode: difference;
  will-change: transform;
}
In this example:
  • We create a cursor element using a div with the class “cursor”.
  • We style the cursor using CSS, and set its initial position using GSAP.
  • We have a link with the class “link” that will trigger the scale effect on hover.
  • GSAP is used to handle the cursor movement and the scale animation on link hover.

Here is the working example link – https://cdpn.io/pen/debug/eYXeLbP?authentication_hash=nqMwvgmNNeQk

2 comments

Comments are closed.