curvia/dist/curvia.es.js

A lightweight animation library for React and Vanilla JS

function h({ loading: b = !1 } = {}) {
  if (b) return;
  const r = window.gsap;
  document.querySelectorAll("[animate]").forEach((t) => {
    const m = t.getAttribute("animate").split(" ").map((s) => s.trim()), e = {
      opacity: 0,
      x: 0,
      y: 0,
      scale: 1,
      rotate: 0,
      delay: 0,
      duration: 1,
      ease: "power3.out",
      repeat: 0,
      z: 999,
      maxOffset: 20,
      direction: "center"
    };
    let y = !1, f = !1, u = !1;
    if (m.forEach((s) => {
      const [o, a] = s.includes(":") ? s.split(":").map((n) => n.trim()) : [s, !0];
      switch (o) {
        case "fade-in":
          e.opacity = 0;
          break;
        case "fade-out":
          e.opacity = 1;
          break;
        case "slide-up":
          e.y = 60;
          break;
        case "slide-down":
          e.y = -60;
          break;
        case "slide-left":
          e.x = 60;
          break;
        case "slide-right":
          e.x = -60;
          break;
        case "zoom-in":
          e.scale = 0;
          break;
        case "zoom-out":
          e.scale = 1.6;
          break;
        case "rotate":
          e.rotate = Number(a);
          break;
        case "delay":
          e.delay = parseFloat(a);
          break;
        case "duration":
          e.duration = parseFloat(a);
          break;
        case "scale":
          e.scale = parseFloat(a);
          break;
        case "ease":
          e.ease = a;
          break;
        case "repeat":
          e.repeat = parseInt(a);
          break;
        case "z":
          e.z = parseInt(a);
          break;
        case "y":
          e.y = parseInt(a);
          break;
        case "x":
          e.x = parseInt(a);
          break;
        case "direction":
          e.direction = a;
          break;
        case "magnet":
          y = !0, a && (e.maxOffset = parseInt(a));
          break;
        case "typewriter":
          f = !0;
          break;
        case "heartbeat":
          u = !0;
          break;
      }
    }), r.fromTo(t, e, {
      opacity: 1,
      x: 0,
      y: 0,
      scale: 1,
      rotate: 0,
      ease: e.ease,
      delay: e.delay,
      duration: e.duration,
      repeat: e.repeat
    }), y) {
      const s = (a) => {
        const n = t.getBoundingClientRect(), i = a.clientX - n.left, d = a.clientY - n.top, l = n.width / 2, c = n.height / 2, p = (i - l) / l * e.maxOffset, k = (d - c) / c * e.maxOffset;
        r.to(t, { x: p, y: k, ease: "power3.out", duration: 0.3 });
      }, o = () => r.to(t, { x: 0, y: 0, ease: "power3.out", duration: 0.4 });
      t.addEventListener("mousemove", s), t.addEventListener("mouseleave", o);
    }
    if (f) {
      const s = t.textContent;
      t.textContent = "", t.style.borderRight = "2px solid #fff", t.style.whiteSpace = "nowrap", t.style.overflow = "hidden", t.style.display = "inline-block", t.style.textAlign = e.direction;
      const o = s.split(""), a = 0.1, n = 0.05;
      r.to(t, { borderColor: "transparent", repeat: -1, yoyo: !0, duration: 0.5, ease: "none" });
      const i = () => {
        o.forEach((l, c) => {
          r.delayedCall(c * a, () => t.textContent = s.slice(0, c + 1));
        }), r.delayedCall(o.length * a + 0.5, d);
      }, d = () => {
        o.forEach((l, c) => {
          r.delayedCall(c * n, () => {
            const p = s.slice(0, o.length - c - 1);
            t.textContent = p || " ";
          });
        }), r.delayedCall(o.length * n + 0.5, i);
      };
      i();
    }
    u && r.to(t, {
      scale: 1.1,
      repeat: -1,
      yoyo: !0,
      ease: "power1.inOut",
      duration: 0.6
    });
  });
}
export {
  h as Animation
};