Clone 01

Hover
Reveal

Efecto agency clásico. Hover sobre un item → imagen aparece y sigue el cursor. Inspirado en Basement Studio y Locomotive.

gsap.quickTo · mouseenter · mousemove

Técnica 02 — Cursor magnético

El botón atrae el cursor
hacia su centro.

mousemove calcula la distancia del cursor al centro del botón y lo desplaza proporcionalmente. mouseleave regresa con back.out.

quickTo — el truco

gsap.quickTo crea una función reutilizable que actualiza el destino de un tween en cada frame sin crear un tween nuevo. Mucho más eficiente que gsap.to en eventos mousemove. 

// ❌ Ineficiente — crea un tween por frame
el.addEventListener("mousemove", (e) => {
  gsap.to(cursor, { x: e.clientX });
});

// ✅ quickTo — un tween, destino actualizable
const xTo = gsap.quickTo(cursor, "x", {
  duration: 0.4,
  ease: "power3",
});

el.addEventListener("mousemove", (e) => {
  xTo(e.clientX); // actualiza el destino
});

Efecto magnético

Calcular el offset del cursor respecto al centro del elemento y desplazar el botón proporcionalmente. La fuerza (0.35) controla cuánto se mueve. 

btn.addEventListener("mousemove", (e) => {
  const rect = btn.getBoundingClientRect();
  const x = e.clientX - rect.left - rect.width / 2;
  const y = e.clientY - rect.top - rect.height / 2;

  gsap.to(btn, {
    x: x * 0.35,
    y: y * 0.35,
    duration: 0.4,
    ease: "power2.out",
  });
});

btn.addEventListener("mouseleave", () => {
  gsap.to(btn, {
    x: 0, y: 0,
    duration: 0.7,
    ease: "back.out(2)",
  });
});

siguiente

05 — Three.js Geometría

→