Custom Cursor

Documentation

Import the Custom Cursor module via GeneratePress to have all the classes and add it as a Custom Cursor block to the elements to add it globally.

Script

<script>
document.addEventListener("DOMContentLoaded", () => {
  const cursor = document.querySelector(".custom-cursor");
  const cursorText = cursor.querySelector(".custom-cursor-content");
  const cursorBg = cursor.querySelector(".custom-cursor-background");

  // Startwert setzen
  gsap.set(cursor, { scale: 0.6, opacity: 0 });

  window.addEventListener("mousemove", (e) => {
    gsap.to(cursor, {
      x: e.clientX - 60,
      y: e.clientY - 60,
      duration: 0.15,
      ease: "power2.out",
    });
  });

  const interactiveElements = document.querySelectorAll(".has-custom-cursor, [data-cursor-text]");

  interactiveElements.forEach((el) => {
    el.addEventListener("mouseenter", () => {
      const text = el.getAttribute("data-cursor-text");
      const color = el.getAttribute("data-cursor-color");

      if (text !== null) cursorText.textContent = text;
      if (color !== null) cursorBg.style.backgroundColor = color;

      gsap.to(cursor, { opacity: 1, scale: 1, duration: 0.25, ease: "power2.out" });
    });

    el.addEventListener("mouseleave", () => {
      gsap.to(cursor, { opacity: 0, scale: 0.6, duration: 0.25, ease: "power2.out" });

      // nur zurücksetzen, wenn zuvor überschrieben
      if (el.hasAttribute("data-cursor-text")) cursorText.textContent = "View";
      if (el.hasAttribute("data-cursor-color")) cursorBg.style.backgroundColor = "";
    });
  });
});
</script>