@vkm-js/animate/dist/cdn.js

An Alpinejs to animate things with Intersection Observer.

(() => {
  // packages/animate/src/index.js
  function src_default(Alpine) {
    Alpine.directive("animate", (el, { value, modifiers }) => {
      const animationTypes = ["fade", "zoom", "up", "down"];
      const type = modifiers.find((mod) => animationTypes.includes(mod)) || "fade";
      const modifierDuration = modifiers.find((mod) => /^\d+$/.test(mod));
      const duration = modifierDuration || value || "1000";
      el.style.transition = `all ${duration}ms ease`;
      switch (type) {
        case "fade":
          el.style.opacity = 0;
          break;
        case "up":
          el.style.opacity = 0;
          el.style.transform = "translateY(20px)";
          break;
        case "down":
          el.style.opacity = 0;
          el.style.transform = "translateY(-50px)";
          break;
        case "zoom":
          el.style.opacity = 0;
          el.style.transform = "scale(0.8)";
          break;
      }
      const observer = new IntersectionObserver(([entry]) => {
        if (entry.isIntersecting) {
          el.style.opacity = 1;
          if (type === "up" || type === "down") el.style.transform = "translateY(0)";
          if (type === "zoom") el.style.transform = "scale(1)";
          observer.unobserve(el);
        }
      }, { threshold: 0.1 });
      observer.observe(el);
    });
  }

  // packages/animate/builds/cdn.js
  document.addEventListener("alpine:init", () => {
    window.Alpine.plugin(src_default);
  });
})();