Building a Custom Cursor with GSAP

Custom cursors are a signature touch on premium websites.Let's build one with GSAP.

The Basic Structure

First, create the HTML elements:

<div class="cursor-ring"></div>
<div class="cursor-dot"></div>

Styling

.cursor-ring {
  width: 40px;
  height: 40px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 9999;
}

.cursor-dot {
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 9999;
}

The Animation Logic

gsap.set([ring, dot], { xPercent: -50, yPercent: -50 });

window.addEventListener('mousemove', (e) => {
  gsap.to(dot, { x: e.clientX, y: e.clientY, duration: 0.1 });
  gsap.to(ring, { x: e.clientX, y: e.clientY, duration: 0.3 });
});

Adding Hover Effects

Make the cursor react to interactive elements:

const links = document.querySelectorAll('a, button');

links.forEach(link => {
  link.addEventListener('mouseenter', () => {
    gsap.to(ring, { scale: 1.5, borderColor: 'rgba(139, 92, 246, 0.8)' });
  });
  
  link.addEventListener('mouseleave', () => {
    gsap.to(ring, { scale: 1, borderColor: 'rgba(255, 255, 255, 0.5)' });
  });
});

Performance Tips

• Use transform properties only (no top/left)
• Hide on mobile devices
• Consider reduced motion preferences

Conclusion

Custom cursors add personality to your site. Start simple, then add complexity as needed.