Botones magnéticos

gsap.quickTo

Mueve el cursor sobre los botones

Atracción suave con retorno al origen.

magnetic-buttons.js

document.querySelectorAll('.mag-btn').forEach((btn) => {
  const xTo = gsap.quickTo(btn, 'x', {
    duration: 0.55,
    ease: 'power3'
  });
  const yTo = gsap.quickTo(btn, 'y', {
    duration: 0.55,
    ease: 'power3'
  });

  btn.addEventListener('mousemove', (event) => {
    const box = btn.getBoundingClientRect();
    const centerX = box.left + box.width / 2;
    const centerY = box.top + box.height / 2;

    xTo((event.clientX - centerX) * 0.34);
    yTo((event.clientY - centerY) * 0.34);
  });

  btn.addEventListener('mouseleave', () => {
    xTo(0);
    yTo(0);
  });
});

quickTo evita crear un tween nuevo en cada movimiento del ratón. El multiplicador controla la fuerza: entre 0.25 y 0.4 suele dar una microinteracción precisa sin perder legibilidad.