Construire un Curseur Personnalisé avec GSAP

Les curseurs personnalisés sont une touche signature sur les sites web premium. Construisons-en un avec GSAP.

La Structure de Base

D'abord, créez les éléments HTML :

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

Stylisation

.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;
}

La Logique d'Animation

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 });
});

Ajouter des Effets de Survol

Faites réagir le curseur aux éléments interactifs :

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)' });
  });
});

Conseils de Performance

• Utilisez uniquement les propriétés de transformation (pas de top/left)
• Cachez sur les appareils mobiles
• Considérez les préférences de mouvement réduit

Conclusion

Les curseurs personnalisés ajoutent de la personnalité à votre site. Commencez simple, puis ajoutez de la complexité au besoin.