taos/dist/taos.mjs

TAOS - Tailwind CSS Animation on Scroll Library

(function() {
  const w = (t, s) => {
    let e = null;
    return () => {
      clearTimeout(e), e = setTimeout(t, s);
    };
  }, c = (t, s) => {
    let e = !1;
    return () => {
      e || (t(), e = !0, setTimeout(() => e = !1, s));
    };
  };
  let i = [], l = window.innerWidth, o = window.scrollY;
  const n = (t) => t.getAttribute("class") || "", r = (t, s) => {
    t.setAttribute("class", s);
  }, b = (t) => {
    const s = n(t);
    s.includes("taos-animate") || (t.style.transitionDuration = "", t.style.transitionDelay = "", r(t, s + " taos-animate"));
  }, u = (t) => {
    const s = n(t);
    r(t, s.split(" taos-animate").join(""));
  }, d = ({ element: t, offset: s }) => t.getBoundingClientRect().top - window.innerHeight + s + o, f = c(() => {
    i.forEach((t) => t.trigger = d(t));
  }, 250), h = () => {
    o = window.scrollY, i.forEach(({ element: t, trigger: s, once: e, offset: y }) => {
      const E = n(t);
      s || (s = d({ element: t, offset: y })), s < o ? b(t) : !e && E.includes("taos-animate") && u(t);
    }), f();
  }, a = () => {
    i = [], document.querySelectorAll('[class*="taos"]').forEach(g), f(), requestAnimationFrame(h);
  }, m = () => {
    l !== window.innerWidth && (l = window.innerWidth, a());
  }, g = (t) => {
    const s = n(t);
    i.some((e) => e.element === t) || s.includes("taos:") && (s.includes("taos-init") || r(t, s + " taos-init"), t.style.transitionDuration = "0ms", t.style.transitionDelay = "0ms", u(t), i.push({
      element: t,
      once: getComputedStyle(t)["animation-iteration-count"] === "1",
      offset: parseInt(t.dataset.taosOffset || 0)
    }));
  };
  a(), addEventListener("scroll", c(h, 32)), addEventListener("orientationchange", a), addEventListener("resize", w(m, 250)), new MutationObserver((t) => {
    t.forEach(({ target: s }) => {
      g(s);
    });
  }).observe(document, {
    attributes: !0,
    childList: !0,
    subtree: !0
  });
})();