animere/dist/animere.js

CSS-driven scroll-based animations

const f = !("onscroll" in window) || /(?:gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent), u = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
function p(e, a, n = "") {
  return new Promise((t) => {
    const s = [`${n}animated`, `${n}${a}`];
    e.classList.add(...s), e.addEventListener(
      "animationend",
      () => {
        e.classList.remove(...s), t();
      },
      { once: !0 }
    );
  });
}
function b(e) {
  return e.replace(/-([a-z])/g, (a, n) => n.toUpperCase());
}
function v(e) {
  return e.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
}
function w({
  prefix: e = "animere",
  offset: a,
  shouldInitialize: n
} = {}) {
  const t = v(e);
  if ((n == null ? void 0 : n()) ?? (!u && !f))
    for (const s of document.querySelectorAll(
      `[data-${t}]:not([data-${t}-skip])`
    ))
      $(s, {
        prefix: t,
        offset: a
      });
}
function $(e, { prefix: a = "animere", offset: n = 0.2 }) {
  const t = b(a);
  e.style.visibility = "hidden";
  const s = async ([o], m) => {
    if (!(o != null && o.isIntersecting))
      return;
    const r = o.target;
    Object.keys(r.dataset).filter((i) => i !== t && i.startsWith(t)).forEach((i) => {
      const c = i.slice(t.length).toLowerCase(), d = `--animate-${c}`;
      c === "delay" && (r.style.animationDelay = `var(${d})`), c === "repeat" && (r.style.animationIterationCount = `var(${d})`), r.style.setProperty(d, r.dataset[i]);
    }), r.style.visibility = "visible", m.unobserve(r), await p(r, r.dataset[t], "animate__"), r.dataset[`${t}Finished`] = "true";
  };
  new IntersectionObserver(s, { threshold: n }).observe(e);
}
var l;
(l = document.currentScript) != null && l.hasAttribute("init") && w();
export {
  p as animate,
  w as createAnimere,
  f as isCrawler,
  u as prefersReducedMotion
};