use-scroll-animate 6.0.0 → 6.1.0

package/dist/element.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
-var core = require('./chunks/core-qpECfEkb.cjs');
+var core = require('./chunks/core-BYLtO0Po.cjs');
+require('./chunks/presets-D2ksQNzJ.cjs');
 
 /**
  * use-scroll-animate - `<scroll-animate>` Web Component

package/dist/element.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"element.cjs","sources":["../src/element.ts"],"sourcesContent":["/**\n * use-scroll-animate - `<scroll-animate>` Web Component\n *\n * ```html\n * <script type=\"module\">\n *   import { defineScrollAnimate } from 'use-scroll-animate/element';\n *   defineScrollAnimate(); // registers <scroll-animate>\n * </script>\n * <scroll-animate animation=\"fade-in-up\" duration=\"800\">…</scroll-animate>\n * ```\n *\n * Attributes mirror the `data-sa-*` attributes without the prefix\n * (`animation`, `duration`, `delay`, `easing`, `threshold`, `root-margin`,\n * `offset`, `once`, `repeat`, `engine`, `view-range`, `progress`,\n * `progress-var`, `exit`). The element dispatches `sa:enter`,\n * `sa:leave`, `sa:start`, `sa:complete` and `sa:progress` (`detail.progress`)\n * events. It renders as `display: block` unless styled otherwise.\n */\n\nimport type { AnimateOptions, ScrollAnimateInstance } from './types';\nimport { createScrollAnimate, readOptions } from './core';\n\nconst ATTRIBUTES = [\n  'animation', 'duration', 'delay', 'easing', 'threshold', 'root-margin', 'offset', 'once', 'repeat',\n  'stagger', 'engine', 'view-range', 'progress', 'progress-var', 'exit',\n];\n\nlet shared: ScrollAnimateInstance | null = null;\n\n/**\n * Register the custom element (default tag `scroll-animate`) and return its\n * class. Safe to call more than once and on the server (returns `undefined`\n * without `customElements`).\n */\nexport function defineScrollAnimate(\n  tagName = 'scroll-animate',\n  instance?: ScrollAnimateInstance\n): CustomElementConstructor | undefined {\n  if (typeof customElements === 'undefined' || typeof HTMLElement === 'undefined') return undefined;\n  const existing = customElements.get(tagName);\n  if (existing) return existing;\n  const getInstance = () => instance || shared || (shared = createScrollAnimate());\n\n  class ScrollAnimateElement extends HTMLElement {\n    static get observedAttributes(): string[] {\n      return ATTRIBUTES;\n    }\n\n    private observing = false;\n\n    private emit(type: string, detail?: unknown): void {\n      this.dispatchEvent(new CustomEvent(`sa:${type}`, { detail }));\n    }\n\n    /** Options parsed from the element's attributes (plus event callbacks). */\n    get options(): AnimateOptions {\n      const opts = readOptions((name) => {\n        const v = this.getAttribute(name);\n        return v === null ? undefined : v;\n      });\n      return {\n        ...opts,\n        onEnter: () => this.emit('enter'),\n        onLeave: () => this.emit('leave'),\n        onStart: () => this.emit('start'),\n        onComplete: () => this.emit('complete'),\n        ...(this.hasAttribute('progress') || this.hasAttribute('progress-var')\n          ? { onProgress: (_el: Element, progress: number) => this.emit('progress', { progress }) }\n          : {}),\n      };\n    }\n\n    connectedCallback(): void {\n      if (!this.style.display && typeof getComputedStyle === 'function' && (getComputedStyle(this).display || 'inline') === 'inline') {\n        this.style.display = 'block';\n      }\n      getInstance().observe(this, this.options);\n      this.observing = true;\n    }\n\n    disconnectedCallback(): void {\n      getInstance().unobserve(this);\n      this.observing = false;\n    }\n\n    attributeChangedCallback(): void {\n      if (!this.observing) return;\n      const sa = getInstance();\n      const record = sa.getObservedElements().find((r) => r.element === this);\n      // Already animated: keep it as it is (avoids re-hiding visible content).\n      if (record && !record.animated) {\n        sa.unobserve(this);\n        sa.observe(this, this.options);\n      }\n    }\n  }\n\n  customElements.define(tagName, ScrollAnimateElement);\n  return ScrollAnimateElement;\n}\n"],"names":["createScrollAnimate","readOptions"],"mappings":"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"}
+{"version":3,"file":"element.cjs","sources":["../src/element.ts"],"sourcesContent":["/**\n * use-scroll-animate - `<scroll-animate>` Web Component\n *\n * ```html\n * <script type=\"module\">\n *   import { defineScrollAnimate } from 'use-scroll-animate/element';\n *   defineScrollAnimate(); // registers <scroll-animate>\n * </script>\n * <scroll-animate animation=\"fade-in-up\" duration=\"800\">…</scroll-animate>\n * ```\n *\n * Attributes mirror the `data-sa-*` attributes without the prefix\n * (`animation`, `duration`, `delay`, `easing`, `threshold`, `root-margin`,\n * `offset`, `once`, `repeat`, `engine`, `view-range`, `progress`,\n * `progress-var`, `exit`). The element dispatches `sa:enter`,\n * `sa:leave`, `sa:start`, `sa:complete` and `sa:progress` (`detail.progress`)\n * events. It renders as `display: block` unless styled otherwise.\n */\n\nimport type { AnimateOptions, ScrollAnimateInstance } from './types';\nimport { createScrollAnimate, readOptions } from './core';\n\nconst ATTRIBUTES = [\n  'animation', 'duration', 'delay', 'easing', 'threshold', 'root-margin', 'offset', 'once', 'repeat',\n  'stagger', 'engine', 'view-range', 'progress', 'progress-var', 'exit',\n];\n\nlet shared: ScrollAnimateInstance | null = null;\n\n/**\n * Register the custom element (default tag `scroll-animate`) and return its\n * class. Safe to call more than once and on the server (returns `undefined`\n * without `customElements`).\n */\nexport function defineScrollAnimate(\n  tagName = 'scroll-animate',\n  instance?: ScrollAnimateInstance\n): CustomElementConstructor | undefined {\n  if (typeof customElements === 'undefined' || typeof HTMLElement === 'undefined') return undefined;\n  const existing = customElements.get(tagName);\n  if (existing) return existing;\n  const getInstance = () => instance || shared || (shared = createScrollAnimate());\n\n  class ScrollAnimateElement extends HTMLElement {\n    static get observedAttributes(): string[] {\n      return ATTRIBUTES;\n    }\n\n    private observing = false;\n\n    private emit(type: string, detail?: unknown): void {\n      this.dispatchEvent(new CustomEvent(`sa:${type}`, { detail }));\n    }\n\n    /** Options parsed from the element's attributes (plus event callbacks). */\n    get options(): AnimateOptions {\n      const opts = readOptions((name) => {\n        const v = this.getAttribute(name);\n        return v === null ? undefined : v;\n      });\n      return {\n        ...opts,\n        onEnter: () => this.emit('enter'),\n        onLeave: () => this.emit('leave'),\n        onStart: () => this.emit('start'),\n        onComplete: () => this.emit('complete'),\n        ...(this.hasAttribute('progress') || this.hasAttribute('progress-var')\n          ? { onProgress: (_el: Element, progress: number) => this.emit('progress', { progress }) }\n          : {}),\n      };\n    }\n\n    connectedCallback(): void {\n      if (!this.style.display && typeof getComputedStyle === 'function' && (getComputedStyle(this).display || 'inline') === 'inline') {\n        this.style.display = 'block';\n      }\n      getInstance().observe(this, this.options);\n      this.observing = true;\n    }\n\n    disconnectedCallback(): void {\n      getInstance().unobserve(this);\n      this.observing = false;\n    }\n\n    attributeChangedCallback(): void {\n      if (!this.observing) return;\n      const sa = getInstance();\n      const record = sa.getObservedElements().find((r) => r.element === this);\n      // Already animated: keep it as it is (avoids re-hiding visible content).\n      if (record && !record.animated) {\n        sa.unobserve(this);\n        sa.observe(this, this.options);\n      }\n    }\n  }\n\n  customElements.define(tagName, ScrollAnimateElement);\n  return ScrollAnimateElement;\n}\n"],"names":["createScrollAnimate","readOptions"],"mappings":"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"}

package/dist/element.d.cts

@@ -2,8 +2,14 @@
  * use-scroll-animate - Core Type Definitions
  * A lightweight, high-performance scroll animation library
  */
-/** Built-in animation presets */
-type AnimationPreset = 'fade-in' | 'fade-in-up' | 'fade-in-down' | 'fade-in-left' | 'fade-in-right' | 'zoom-in' | 'zoom-out' | 'flip-x' | 'flip-y' | 'slide-up' | 'slide-down' | 'slide-left' | 'slide-right' | 'bounce' | 'rotate-in' | 'blur-in' | 'skew-in' | 'scale-x' | 'scale-y' | 'shimmer' | 'pulse' | 'swing' | 'scale-up' | 'blur-in-up' | 'flip-up' | 'flip-down' | 'rotate-left' | 'rotate-right' | 'clip-up' | 'clip-down' | 'clip-left' | 'clip-right' | 'clip-circle';
+/** The 33 core presets (always available in `PRESETS`). */
+type CorePreset = 'fade-in' | 'fade-in-up' | 'fade-in-down' | 'fade-in-left' | 'fade-in-right' | 'zoom-in' | 'zoom-out' | 'flip-x' | 'flip-y' | 'slide-up' | 'slide-down' | 'slide-left' | 'slide-right' | 'bounce' | 'rotate-in' | 'blur-in' | 'skew-in' | 'scale-x' | 'scale-y' | 'shimmer' | 'pulse' | 'swing' | 'scale-up' | 'blur-in-up' | 'flip-up' | 'flip-down' | 'rotate-left' | 'rotate-right' | 'clip-up' | 'clip-down' | 'clip-left' | 'clip-right' | 'clip-circle';
+/**
+ * Every built-in preset name: the core set plus the 6.1 extended set, which is
+ * available once `use-scroll-animate/presets/extended` is loaded (or after
+ * `registerPresets(EXTENDED_PRESETS)`).
+ */
+type AnimationPreset = CorePreset | ExtendedPreset;
 /**
  * How `onProgress` / `progressVar` progress is measured.
  * - `'ratio'` (default): the element's visible ratio (IntersectionObserver `intersectionRatio`).
@@ -22,16 +28,24 @@ type ProgressMode = 'ratio' | 'scroll';
  *   since those only mean something for a time-based animation.
  */
 type ScrollEngine = 'auto' | 'js' | 'css';
+/** The 6.1 extended presets (`use-scroll-animate/presets/extended`). */
+type ExtendedPreset = 'fade-in-up-sm' | 'fade-in-down-sm' | 'fade-in-left-sm' | 'fade-in-right-sm' | 'fade-in-up-lg' | 'fade-in-down-lg' | 'fade-in-left-lg' | 'fade-in-right-lg' | 'fade-in-up-left' | 'fade-in-up-right' | 'fade-in-down-left' | 'fade-in-down-right' | 'fade-in-scale' | 'fade-in-half' | 'zoom-in-up' | 'zoom-in-down' | 'zoom-in-left' | 'zoom-in-right' | 'zoom-out-up' | 'zoom-out-down' | 'zoom-out-left' | 'zoom-out-right' | 'zoom-in-big' | 'zoom-out-big' | 'zoom-bounce' | 'zoom-in-rotate' | 'scale-x-left' | 'scale-x-right' | 'scale-y-top' | 'scale-y-bottom' | 'stretch-x' | 'stretch-y' | 'flip-x-reverse' | 'flip-y-reverse' | 'flip-y-full' | 'flip-diagonal' | 'flip-diagonal-reverse' | 'flip-left' | 'flip-right' | 'unfold-down' | 'unfold-up' | 'door-open-left' | 'door-open-right' | 'fold-in' | 'flip-x-bounce' | 'flip-y-bounce' | 'swing-in-top' | 'swing-in-bottom' | 'swing-in-left' | 'swing-in-right' | 'slide-up-spring' | 'slide-down-spring' | 'slide-left-spring' | 'slide-right-spring' | 'slide-up-sm' | 'slide-down-sm' | 'back-in-up' | 'back-in-down' | 'back-in-left' | 'back-in-right' | 'light-speed-in-left' | 'light-speed-in-right' | 'rise-in' | 'sink-in' | 'float-in-up' | 'float-in-down' | 'roll-in-left' | 'roll-in-right' | 'spiral-in' | 'spiral-in-reverse' | 'spin-in' | 'rotate-in-up-left' | 'rotate-in-up-right' | 'rotate-in-down-left' | 'rotate-in-down-right' | 'skew-in-left' | 'skew-in-y' | 'shear-in' | 'shear-in-reverse' | 'twist-in' | 'tilt-in-left' | 'tilt-in-right' | 'blur-in-down' | 'blur-in-left' | 'blur-in-right' | 'blur-in-strong' | 'blur-in-zoom' | 'blur-in-scale' | 'blur-in-x' | 'mask-up' | 'mask-down' | 'mask-left' | 'mask-right' | 'blur-mask-up' | 'clip-circle-top' | 'clip-circle-bottom' | 'clip-circle-left' | 'clip-circle-right' | 'clip-circle-corner' | 'clip-ellipse' | 'clip-diamond' | 'clip-split-x' | 'clip-split-y' | 'clip-box' | 'clip-pill' | 'clip-blinds' | 'clip-blinds-x' | 'clip-diagonal' | 'clip-diagonal-reverse' | 'clip-slant-right' | 'clip-slant-left' | 'bounce-in' | 'bounce-in-up' | 'bounce-in-down' | 'bounce-in-left' | 'bounce-in-right' | 'elastic-in' | 'elastic-in-x' | 'rubber-in' | 'jello-in' | 'wobble-in' | 'tada-in' | 'heartbeat-in' | 'drop-in' | 'pop-in' | 'squash-in' | 'shake-in' | 'swing-in' | 'brightness-in' | 'darken-in' | 'color-in' | 'saturate-in' | 'hue-in' | 'sepia-in' | 'invert-in' | 'contrast-in' | 'exposure-in' | 'vintage-in' | 'blur-bright-in' | 'shadow-lift' | 'neon-glow-in' | 'glow-in' | 'perspective-in-up' | 'perspective-in-down' | 'perspective-in-left' | 'perspective-in-right' | 'depth-push' | 'depth-pull' | 'depth-in-up' | 'swoop-in-left' | 'swoop-in-right' | 'card-tilt-in' | 'glitch-in' | 'glitch-in-color' | 'typewriter' | 'typewriter-lines' | 'hinge-in' | 'flicker-in' | 'scan-in' | 'materialize' | 'teleport-in' | 'stagger-fade-up' | 'stagger-pop' | 'stagger-rise' | 'stagger-slide' | 'stagger-flip' | 'stagger-blur' | 'stagger-zoom' | 'stagger-drop' | 'scrub-parallax-up' | 'scrub-parallax-down' | 'scrub-rotate' | 'scrub-spin' | 'scrub-scale' | 'scrub-shrink' | 'scrub-pan-left' | 'scrub-pan-right' | 'scrub-tilt' | 'scrub-fade-through' | 'scrub-blur-through' | 'scrub-reveal-x';
 /** Easing function types */
 type EasingType = 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring' | 'soft-spring' | 'heavy-bounce' | [number, number, number, number] | ((t: number) => number) | string;
 /** Keyframe definition for custom animations */
 interface AnimationKeyframe {
     [property: string]: string | number;
 }
+/** One intermediate keyframe of a preset: `offset` is 0 < offset < 1. */
+interface AnimationFrame extends AnimationKeyframe {
+    offset: number;
+}
 /** Custom animation definition */
 interface CustomAnimation {
     from: AnimationKeyframe;
     to: AnimationKeyframe;
+    /** Optional intermediate keyframes (overshoot, bounce, …), played between `from` and `to`. */
+    frames?: AnimationFrame[];
 }
 /** Per-element animation options */
 interface AnimateOptions {

package/dist/element.d.ts

@@ -2,8 +2,14 @@
  * use-scroll-animate - Core Type Definitions
  * A lightweight, high-performance scroll animation library
  */
-/** Built-in animation presets */
-type AnimationPreset = 'fade-in' | 'fade-in-up' | 'fade-in-down' | 'fade-in-left' | 'fade-in-right' | 'zoom-in' | 'zoom-out' | 'flip-x' | 'flip-y' | 'slide-up' | 'slide-down' | 'slide-left' | 'slide-right' | 'bounce' | 'rotate-in' | 'blur-in' | 'skew-in' | 'scale-x' | 'scale-y' | 'shimmer' | 'pulse' | 'swing' | 'scale-up' | 'blur-in-up' | 'flip-up' | 'flip-down' | 'rotate-left' | 'rotate-right' | 'clip-up' | 'clip-down' | 'clip-left' | 'clip-right' | 'clip-circle';
+/** The 33 core presets (always available in `PRESETS`). */
+type CorePreset = 'fade-in' | 'fade-in-up' | 'fade-in-down' | 'fade-in-left' | 'fade-in-right' | 'zoom-in' | 'zoom-out' | 'flip-x' | 'flip-y' | 'slide-up' | 'slide-down' | 'slide-left' | 'slide-right' | 'bounce' | 'rotate-in' | 'blur-in' | 'skew-in' | 'scale-x' | 'scale-y' | 'shimmer' | 'pulse' | 'swing' | 'scale-up' | 'blur-in-up' | 'flip-up' | 'flip-down' | 'rotate-left' | 'rotate-right' | 'clip-up' | 'clip-down' | 'clip-left' | 'clip-right' | 'clip-circle';
+/**
+ * Every built-in preset name: the core set plus the 6.1 extended set, which is
+ * available once `use-scroll-animate/presets/extended` is loaded (or after
+ * `registerPresets(EXTENDED_PRESETS)`).
+ */
+type AnimationPreset = CorePreset | ExtendedPreset;
 /**
  * How `onProgress` / `progressVar` progress is measured.
  * - `'ratio'` (default): the element's visible ratio (IntersectionObserver `intersectionRatio`).
@@ -22,16 +28,24 @@ type ProgressMode = 'ratio' | 'scroll';
  *   since those only mean something for a time-based animation.
  */
 type ScrollEngine = 'auto' | 'js' | 'css';
+/** The 6.1 extended presets (`use-scroll-animate/presets/extended`). */
+type ExtendedPreset = 'fade-in-up-sm' | 'fade-in-down-sm' | 'fade-in-left-sm' | 'fade-in-right-sm' | 'fade-in-up-lg' | 'fade-in-down-lg' | 'fade-in-left-lg' | 'fade-in-right-lg' | 'fade-in-up-left' | 'fade-in-up-right' | 'fade-in-down-left' | 'fade-in-down-right' | 'fade-in-scale' | 'fade-in-half' | 'zoom-in-up' | 'zoom-in-down' | 'zoom-in-left' | 'zoom-in-right' | 'zoom-out-up' | 'zoom-out-down' | 'zoom-out-left' | 'zoom-out-right' | 'zoom-in-big' | 'zoom-out-big' | 'zoom-bounce' | 'zoom-in-rotate' | 'scale-x-left' | 'scale-x-right' | 'scale-y-top' | 'scale-y-bottom' | 'stretch-x' | 'stretch-y' | 'flip-x-reverse' | 'flip-y-reverse' | 'flip-y-full' | 'flip-diagonal' | 'flip-diagonal-reverse' | 'flip-left' | 'flip-right' | 'unfold-down' | 'unfold-up' | 'door-open-left' | 'door-open-right' | 'fold-in' | 'flip-x-bounce' | 'flip-y-bounce' | 'swing-in-top' | 'swing-in-bottom' | 'swing-in-left' | 'swing-in-right' | 'slide-up-spring' | 'slide-down-spring' | 'slide-left-spring' | 'slide-right-spring' | 'slide-up-sm' | 'slide-down-sm' | 'back-in-up' | 'back-in-down' | 'back-in-left' | 'back-in-right' | 'light-speed-in-left' | 'light-speed-in-right' | 'rise-in' | 'sink-in' | 'float-in-up' | 'float-in-down' | 'roll-in-left' | 'roll-in-right' | 'spiral-in' | 'spiral-in-reverse' | 'spin-in' | 'rotate-in-up-left' | 'rotate-in-up-right' | 'rotate-in-down-left' | 'rotate-in-down-right' | 'skew-in-left' | 'skew-in-y' | 'shear-in' | 'shear-in-reverse' | 'twist-in' | 'tilt-in-left' | 'tilt-in-right' | 'blur-in-down' | 'blur-in-left' | 'blur-in-right' | 'blur-in-strong' | 'blur-in-zoom' | 'blur-in-scale' | 'blur-in-x' | 'mask-up' | 'mask-down' | 'mask-left' | 'mask-right' | 'blur-mask-up' | 'clip-circle-top' | 'clip-circle-bottom' | 'clip-circle-left' | 'clip-circle-right' | 'clip-circle-corner' | 'clip-ellipse' | 'clip-diamond' | 'clip-split-x' | 'clip-split-y' | 'clip-box' | 'clip-pill' | 'clip-blinds' | 'clip-blinds-x' | 'clip-diagonal' | 'clip-diagonal-reverse' | 'clip-slant-right' | 'clip-slant-left' | 'bounce-in' | 'bounce-in-up' | 'bounce-in-down' | 'bounce-in-left' | 'bounce-in-right' | 'elastic-in' | 'elastic-in-x' | 'rubber-in' | 'jello-in' | 'wobble-in' | 'tada-in' | 'heartbeat-in' | 'drop-in' | 'pop-in' | 'squash-in' | 'shake-in' | 'swing-in' | 'brightness-in' | 'darken-in' | 'color-in' | 'saturate-in' | 'hue-in' | 'sepia-in' | 'invert-in' | 'contrast-in' | 'exposure-in' | 'vintage-in' | 'blur-bright-in' | 'shadow-lift' | 'neon-glow-in' | 'glow-in' | 'perspective-in-up' | 'perspective-in-down' | 'perspective-in-left' | 'perspective-in-right' | 'depth-push' | 'depth-pull' | 'depth-in-up' | 'swoop-in-left' | 'swoop-in-right' | 'card-tilt-in' | 'glitch-in' | 'glitch-in-color' | 'typewriter' | 'typewriter-lines' | 'hinge-in' | 'flicker-in' | 'scan-in' | 'materialize' | 'teleport-in' | 'stagger-fade-up' | 'stagger-pop' | 'stagger-rise' | 'stagger-slide' | 'stagger-flip' | 'stagger-blur' | 'stagger-zoom' | 'stagger-drop' | 'scrub-parallax-up' | 'scrub-parallax-down' | 'scrub-rotate' | 'scrub-spin' | 'scrub-scale' | 'scrub-shrink' | 'scrub-pan-left' | 'scrub-pan-right' | 'scrub-tilt' | 'scrub-fade-through' | 'scrub-blur-through' | 'scrub-reveal-x';
 /** Easing function types */
 type EasingType = 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring' | 'soft-spring' | 'heavy-bounce' | [number, number, number, number] | ((t: number) => number) | string;
 /** Keyframe definition for custom animations */
 interface AnimationKeyframe {
     [property: string]: string | number;
 }
+/** One intermediate keyframe of a preset: `offset` is 0 < offset < 1. */
+interface AnimationFrame extends AnimationKeyframe {
+    offset: number;
+}
 /** Custom animation definition */
 interface CustomAnimation {
     from: AnimationKeyframe;
     to: AnimationKeyframe;
+    /** Optional intermediate keyframes (overshoot, bounce, …), played between `from` and `to`. */
+    frames?: AnimationFrame[];
 }
 /** Per-element animation options */
 interface AnimateOptions {

package/dist/element.js

@@ -1,4 +1,5 @@
-import { r as readOptions, c as createScrollAnimate } from './chunks/core-mV_TPgG_.js';
+import { r as readOptions, c as createScrollAnimate } from './chunks/core-BVQW34aX.js';
+import './chunks/presets-BJ09NeTo.js';
 
 /**
  * use-scroll-animate - `<scroll-animate>` Web Component

package/dist/element.js.map

@@ -1 +1 @@
-{"version":3,"file":"element.js","sources":["../src/element.ts"],"sourcesContent":["/**\n * use-scroll-animate - `<scroll-animate>` Web Component\n *\n * ```html\n * <script type=\"module\">\n *   import { defineScrollAnimate } from 'use-scroll-animate/element';\n *   defineScrollAnimate(); // registers <scroll-animate>\n * </script>\n * <scroll-animate animation=\"fade-in-up\" duration=\"800\">…</scroll-animate>\n * ```\n *\n * Attributes mirror the `data-sa-*` attributes without the prefix\n * (`animation`, `duration`, `delay`, `easing`, `threshold`, `root-margin`,\n * `offset`, `once`, `repeat`, `engine`, `view-range`, `progress`,\n * `progress-var`, `exit`). The element dispatches `sa:enter`,\n * `sa:leave`, `sa:start`, `sa:complete` and `sa:progress` (`detail.progress`)\n * events. It renders as `display: block` unless styled otherwise.\n */\n\nimport type { AnimateOptions, ScrollAnimateInstance } from './types';\nimport { createScrollAnimate, readOptions } from './core';\n\nconst ATTRIBUTES = [\n  'animation', 'duration', 'delay', 'easing', 'threshold', 'root-margin', 'offset', 'once', 'repeat',\n  'stagger', 'engine', 'view-range', 'progress', 'progress-var', 'exit',\n];\n\nlet shared: ScrollAnimateInstance | null = null;\n\n/**\n * Register the custom element (default tag `scroll-animate`) and return its\n * class. Safe to call more than once and on the server (returns `undefined`\n * without `customElements`).\n */\nexport function defineScrollAnimate(\n  tagName = 'scroll-animate',\n  instance?: ScrollAnimateInstance\n): CustomElementConstructor | undefined {\n  if (typeof customElements === 'undefined' || typeof HTMLElement === 'undefined') return undefined;\n  const existing = customElements.get(tagName);\n  if (existing) return existing;\n  const getInstance = () => instance || shared || (shared = createScrollAnimate());\n\n  class ScrollAnimateElement extends HTMLElement {\n    static get observedAttributes(): string[] {\n      return ATTRIBUTES;\n    }\n\n    private observing = false;\n\n    private emit(type: string, detail?: unknown): void {\n      this.dispatchEvent(new CustomEvent(`sa:${type}`, { detail }));\n    }\n\n    /** Options parsed from the element's attributes (plus event callbacks). */\n    get options(): AnimateOptions {\n      const opts = readOptions((name) => {\n        const v = this.getAttribute(name);\n        return v === null ? undefined : v;\n      });\n      return {\n        ...opts,\n        onEnter: () => this.emit('enter'),\n        onLeave: () => this.emit('leave'),\n        onStart: () => this.emit('start'),\n        onComplete: () => this.emit('complete'),\n        ...(this.hasAttribute('progress') || this.hasAttribute('progress-var')\n          ? { onProgress: (_el: Element, progress: number) => this.emit('progress', { progress }) }\n          : {}),\n      };\n    }\n\n    connectedCallback(): void {\n      if (!this.style.display && typeof getComputedStyle === 'function' && (getComputedStyle(this).display || 'inline') === 'inline') {\n        this.style.display = 'block';\n      }\n      getInstance().observe(this, this.options);\n      this.observing = true;\n    }\n\n    disconnectedCallback(): void {\n      getInstance().unobserve(this);\n      this.observing = false;\n    }\n\n    attributeChangedCallback(): void {\n      if (!this.observing) return;\n      const sa = getInstance();\n      const record = sa.getObservedElements().find((r) => r.element === this);\n      // Already animated: keep it as it is (avoids re-hiding visible content).\n      if (record && !record.animated) {\n        sa.unobserve(this);\n        sa.observe(this, this.options);\n      }\n    }\n  }\n\n  customElements.define(tagName, ScrollAnimateElement);\n  return ScrollAnimateElement;\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"element.js","sources":["../src/element.ts"],"sourcesContent":["/**\n * use-scroll-animate - `<scroll-animate>` Web Component\n *\n * ```html\n * <script type=\"module\">\n *   import { defineScrollAnimate } from 'use-scroll-animate/element';\n *   defineScrollAnimate(); // registers <scroll-animate>\n * </script>\n * <scroll-animate animation=\"fade-in-up\" duration=\"800\">…</scroll-animate>\n * ```\n *\n * Attributes mirror the `data-sa-*` attributes without the prefix\n * (`animation`, `duration`, `delay`, `easing`, `threshold`, `root-margin`,\n * `offset`, `once`, `repeat`, `engine`, `view-range`, `progress`,\n * `progress-var`, `exit`). The element dispatches `sa:enter`,\n * `sa:leave`, `sa:start`, `sa:complete` and `sa:progress` (`detail.progress`)\n * events. It renders as `display: block` unless styled otherwise.\n */\n\nimport type { AnimateOptions, ScrollAnimateInstance } from './types';\nimport { createScrollAnimate, readOptions } from './core';\n\nconst ATTRIBUTES = [\n  'animation', 'duration', 'delay', 'easing', 'threshold', 'root-margin', 'offset', 'once', 'repeat',\n  'stagger', 'engine', 'view-range', 'progress', 'progress-var', 'exit',\n];\n\nlet shared: ScrollAnimateInstance | null = null;\n\n/**\n * Register the custom element (default tag `scroll-animate`) and return its\n * class. Safe to call more than once and on the server (returns `undefined`\n * without `customElements`).\n */\nexport function defineScrollAnimate(\n  tagName = 'scroll-animate',\n  instance?: ScrollAnimateInstance\n): CustomElementConstructor | undefined {\n  if (typeof customElements === 'undefined' || typeof HTMLElement === 'undefined') return undefined;\n  const existing = customElements.get(tagName);\n  if (existing) return existing;\n  const getInstance = () => instance || shared || (shared = createScrollAnimate());\n\n  class ScrollAnimateElement extends HTMLElement {\n    static get observedAttributes(): string[] {\n      return ATTRIBUTES;\n    }\n\n    private observing = false;\n\n    private emit(type: string, detail?: unknown): void {\n      this.dispatchEvent(new CustomEvent(`sa:${type}`, { detail }));\n    }\n\n    /** Options parsed from the element's attributes (plus event callbacks). */\n    get options(): AnimateOptions {\n      const opts = readOptions((name) => {\n        const v = this.getAttribute(name);\n        return v === null ? undefined : v;\n      });\n      return {\n        ...opts,\n        onEnter: () => this.emit('enter'),\n        onLeave: () => this.emit('leave'),\n        onStart: () => this.emit('start'),\n        onComplete: () => this.emit('complete'),\n        ...(this.hasAttribute('progress') || this.hasAttribute('progress-var')\n          ? { onProgress: (_el: Element, progress: number) => this.emit('progress', { progress }) }\n          : {}),\n      };\n    }\n\n    connectedCallback(): void {\n      if (!this.style.display && typeof getComputedStyle === 'function' && (getComputedStyle(this).display || 'inline') === 'inline') {\n        this.style.display = 'block';\n      }\n      getInstance().observe(this, this.options);\n      this.observing = true;\n    }\n\n    disconnectedCallback(): void {\n      getInstance().unobserve(this);\n      this.observing = false;\n    }\n\n    attributeChangedCallback(): void {\n      if (!this.observing) return;\n      const sa = getInstance();\n      const record = sa.getObservedElements().find((r) => r.element === this);\n      // Already animated: keep it as it is (avoids re-hiding visible content).\n      if (record && !record.animated) {\n        sa.unobserve(this);\n        sa.observe(this, this.options);\n      }\n    }\n  }\n\n  customElements.define(tagName, ScrollAnimateElement);\n  return ScrollAnimateElement;\n}\n"],"names":[],"mappings":"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"}

package/dist/element.umd.js

@@ -1,2 +1,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).ScrollAnimateElement={})}(this,function(e){"use strict";const t={"fade-in":{from:{opacity:0},to:{opacity:1}},"fade-in-up":{from:{opacity:0,transform:"translateY(40px)"},to:{opacity:1,transform:"translateY(0px)"}},"fade-in-down":{from:{opacity:0,transform:"translateY(-40px)"},to:{opacity:1,transform:"translateY(0px)"}},"fade-in-left":{from:{opacity:0,transform:"translateX(-40px)"},to:{opacity:1,transform:"translateX(0px)"}},"fade-in-right":{from:{opacity:0,transform:"translateX(40px)"},to:{opacity:1,transform:"translateX(0px)"}},"zoom-in":{from:{opacity:0,transform:"scale(0.8)"},to:{opacity:1,transform:"scale(1)"}},"zoom-out":{from:{opacity:0,transform:"scale(1.2)"},to:{opacity:1,transform:"scale(1)"}},"flip-x":{from:{opacity:0,transform:"rotateX(-90deg)"},to:{opacity:1,transform:"rotateX(0deg)"}},"flip-y":{from:{opacity:0,transform:"rotateY(-90deg)"},to:{opacity:1,transform:"rotateY(0deg)"}},"slide-up":{from:{transform:"translateY(100%)"},to:{transform:"translateY(0px)"}},"slide-down":{from:{transform:"translateY(-100%)"},to:{transform:"translateY(0px)"}},"slide-left":{from:{transform:"translateX(-100%)"},to:{transform:"translateX(0px)"}},"slide-right":{from:{transform:"translateX(100%)"},to:{transform:"translateX(0px)"}},bounce:{from:{opacity:0,transform:"translateY(-60px)"},to:{opacity:1,transform:"translateY(0px)"}},"rotate-in":{from:{opacity:0,transform:"rotate(-180deg) scale(0.5)"},to:{opacity:1,transform:"rotate(0deg) scale(1)"}},"blur-in":{from:{opacity:0,filter:"blur(12px)"},to:{opacity:1,filter:"blur(0px)"}},"skew-in":{from:{opacity:0,transform:"skewX(20deg) translateX(30px)"},to:{opacity:1,transform:"skewX(0deg) translateX(0px)"}},"scale-x":{from:{transform:"scaleX(0)"},to:{transform:"scaleX(1)"}},"scale-y":{from:{transform:"scaleY(0)"},to:{transform:"scaleY(1)"}},shimmer:{from:{opacity:.5,filter:"brightness(1)"},to:{opacity:1,filter:"brightness(1.5)"}},pulse:{from:{transform:"scale(1)"},to:{transform:"scale(1.05)"}},swing:{from:{transform:"rotate(-10deg)"},to:{transform:"rotate(10deg)"}},"scale-up":{from:{opacity:0,transform:"scale(0.5)"},to:{opacity:1,transform:"scale(1)"}},"blur-in-up":{from:{opacity:0,filter:"blur(12px)",transform:"translateY(40px)"},to:{opacity:1,filter:"blur(0px)",transform:"translateY(0px)"}},"flip-up":{from:{opacity:0,transform:"perspective(800px) rotateX(60deg)"},to:{opacity:1,transform:"perspective(800px) rotateX(0deg)"}},"flip-down":{from:{opacity:0,transform:"perspective(800px) rotateX(-60deg)"},to:{opacity:1,transform:"perspective(800px) rotateX(0deg)"}},"rotate-left":{from:{opacity:0,transform:"rotate(-15deg) translateX(-40px)"},to:{opacity:1,transform:"rotate(0deg) translateX(0px)"}},"rotate-right":{from:{opacity:0,transform:"rotate(15deg) translateX(40px)"},to:{opacity:1,transform:"rotate(0deg) translateX(0px)"}},"clip-up":{from:{clipPath:"inset(100% 0% 0% 0%)"},to:{clipPath:"inset(0% 0% 0% 0%)"}},"clip-down":{from:{clipPath:"inset(0% 0% 100% 0%)"},to:{clipPath:"inset(0% 0% 0% 0%)"}},"clip-left":{from:{clipPath:"inset(0% 0% 0% 100%)"},to:{clipPath:"inset(0% 0% 0% 0%)"}},"clip-right":{from:{clipPath:"inset(0% 100% 0% 0%)"},to:{clipPath:"inset(0% 0% 0% 0%)"}},"clip-circle":{from:{clipPath:"circle(0% at 50% 50%)"},to:{clipPath:"circle(75% at 50% 50%)"}}};function n(e){if("string"==typeof e)return t[e.trim()]??t["fade-in-up"];if(Array.isArray(e)){const n={from:{},to:{}};return e.forEach(e=>{const o=t[e.trim()];o&&(Object.entries(o.from).forEach(([e,t])=>{"transform"===e&&n.from[e]?n.from[e]=`${n.from[e]} ${t}`:n.from[e]=t}),Object.entries(o.to).forEach(([e,t])=>{"transform"===e&&n.to[e]?n.to[e]=`${n.to[e]} ${t}`:n.to[e]=t}))}),n}return e}const o={linear:"linear",ease:"ease","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out",spring:"cubic-bezier(0.34, 1.56, 0.64, 1)","soft-spring":"cubic-bezier(0.175, 0.885, 0.32, 1.275)","heavy-bounce":"cubic-bezier(0.68, -0.55, 0.265, 1.55)"};function r(e){return"string"==typeof e?o[e]??e:Array.isArray(e)?`cubic-bezier(${e.join(", ")})`:"function"==typeof e?"linear":"ease"}const s={defaultAnimation:"fade-in-up",defaultDuration:600,defaultDelay:0,defaultEasing:"ease",defaultThreshold:.1,defaultRootMargin:"0px",defaultRepeat:!1,defaultOnce:!0,defaultOffset:0,hiddenClass:"sa-hidden",visibleClass:"sa-visible",useClassNames:!1,disabled:!1,root:null,autoUnregister:!0,defaultEngine:"auto"},a=()=>{},i=()=>"undefined"!=typeof window&&"undefined"!=typeof document,c=()=>i()&&"undefined"!=typeof IntersectionObserver;let l,f;function d(e){if(void 0===e||""===e.trim())return;const t=parseFloat(e);return Number.isFinite(t)?t:void 0}const u=["entry 0%","entry 100%"];function m(e){const t=e.trim();return t?t.startsWith("--")?t:`--${t}`:"--sa-progress"}function p(e){const t={},n=e("animation");n&&(t.animation=n.includes(",")?n.split(",").map(e=>e.trim()):n.trim()),t.duration=d(e("duration")),t.delay=d(e("delay"));const o=e("easing");if(o){const e=o.trim();if(e.startsWith("["))try{t.easing=JSON.parse(e)}catch{}else t.easing=e}const r=e("threshold");r&&(t.threshold=r.includes(",")?r.split(",").map(parseFloat).filter(Number.isFinite):d(r));const s=e("root-margin");s&&(t.rootMargin=s);const a=e("repeat");void 0!==a&&(t.repeat="false"!==a);const i=e("once");void 0!==i&&(t.once="false"!==i),t.offset=d(e("offset")),t.stagger=d(e("stagger"));const c=e("progress-var");void 0!==c&&(t.progressVar=m(c));const l=e("engine")?.trim();"auto"!==l&&"js"!==l&&"css"!==l||(t.engine=l);const f=e("view-range");if(f){const[e,n]=f.split(",").map(e=>e.trim());e&&n&&(t.viewRange=[e,n])}const u=e("exit");if(void 0!==u){const e=u.trim();t.exit=""===e||"true"===e||"false"!==e&&(e.includes(",")?e.split(",").map(e=>e.trim()):e)}const p=e("progress");return p&&(t.progressMode="scroll"===p.trim()?"scroll":"ratio"),Object.keys(t).forEach(e=>void 0===t[e]&&delete t[e]),t}function g(e,t){let n=e.engine??t.defaultEngine;"auto"===n&&(void 0!==e.duration||void 0!==e.delay||void 0!==e.offset||(e.stagger??0)>0)&&(n="js");const o=e.exit??!1,r=e.repeat??(!!o||t.defaultRepeat),s=e.threshold??t.defaultThreshold;return{animation:e.animation??t.defaultAnimation,duration:e.duration??t.defaultDuration,delay:e.delay??t.defaultDelay,easing:e.easing??t.defaultEasing,threshold:Array.isArray(s)&&0===s.length?t.defaultThreshold:s,rootMargin:e.rootMargin??t.defaultRootMargin,repeat:r,once:e.once??(!r&&t.defaultOnce),offset:e.offset??t.defaultOffset,stagger:e.stagger??0,onStart:e.onStart??a,onComplete:e.onComplete??a,onEnter:e.onEnter??a,onLeave:e.onLeave??a,onProgress:e.onProgress??a,progressMode:e.progressMode??"ratio",progressVar:e.progressVar?m(e.progressVar):"",engine:n,viewRange:e.viewRange??u,exit:o}}function h(e){return e&&i()?"string"==typeof e?Array.from(document.querySelectorAll(e)):e instanceof Element?[e]:Array.isArray(e)||e instanceof NodeList?Array.from(e).filter(e=>e instanceof Element):[]:[]}function y(e,t){if(!i())return 0;const n=e.getBoundingClientRect();let o=0,r=window.innerHeight||document.documentElement.clientHeight||0;if(t){const e=t.getBoundingClientRect();o=e.top,r=e.height}const s=r+n.height;if(s<=0)return 0;const a=(o+r-n.top)/s;return a<0?0:a>1?1:a}const v=new WeakMap,b=new WeakMap,x=new WeakMap;function E(e){const t=b.get(e);t&&(b.delete(e),t.cancel());const n=v.get(e);n&&(v.delete(e),n.onfinish=null,n.cancel());const o=x.get(e);void 0!==o&&(clearTimeout(o),x.delete(e))}function w(e,t){const n=e.style;n&&Object.keys(t).forEach(e=>{n[e]=String(t[e])})}const S=/(-?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?)([a-z%]*)/gi;let C,M;function k(e,t){if("function"!=typeof t)return{keyframes:[e.from,e.to],easing:r(t)};const n=function(e){const t=[];for(let n=0;n<=30;n++){const o=e(n/30);t.push(Number.isFinite(o)?+o.toFixed(4):n/30)}return t}(t);if(void 0===C&&(C="undefined"!=typeof CSS&&"function"==typeof CSS.supports&&CSS.supports("animation-timing-function","linear(0, 1)")),C)return{keyframes:[e.from,e.to],easing:`linear(${n.join(", ")})`};const o=Object.keys(e.from).filter(t=>t in e.to);return{keyframes:n.map((t,n)=>{const r={offset:n/30};return o.forEach(n=>{r[n]=function(e,t,n){if("number"==typeof e&&"number"==typeof t)return e+(t-e)*n;const o=String(e),r=String(t),s=[],a=[],i=o.replace(S,(e,t,n)=>(s.push([parseFloat(t),n]),"#"));if(i!==r.replace(S,(e,t,n)=>(a.push([parseFloat(t),n]),"#"))||s.length!==a.length)return n<.5?e:t;let c=0,l=!0;const f=i.replace(/#/g,()=>{const[e,t]=s[c],[o,r]=a[c++];t!==r&&0!==e&&0!==o&&t&&r&&(l=!1);const i=t||r;return`${+(e+(o-e)*n).toFixed(4)}${i}`});return l?f:n<.5?e:t}(e.from[n],e.to[n],t)}),r}),easing:"linear"}}function A(e,t){if(E(e),t.useClassNames)e.classList.remove(t.hiddenClass),e.classList.add(t.visibleClass);else{const t=e.style;t&&(t.opacity="")}}function X(e){return!!e.disabled||!!i()&&(void 0===l&&(l="function"==typeof window.matchMedia?window.matchMedia("(prefers-reduced-motion: reduce)"):null),!!l&&l.matches)}function O(e,t,o,r=0,s){const{duration:a,delay:i,stagger:c,onStart:l,onComplete:f}=t,d=Math.max(0,i+r*c);if(E(e),X(o))return A(e,o),l(e),void f(e);if(o.useClassNames)return d>0&&(e.style.animationDelay=`${d}ms`),e.classList.remove(o.hiddenClass),e.classList.add(o.visibleClass),l(e),s?.add(e),void x.set(e,setTimeout(()=>{x.delete(e),s?.delete(e),f(e)},a+d));const u=n(t.animation);if(!("opacity"in u.to)){const t=e.style;t&&"0"===t.opacity&&(t.opacity="")}if("function"!=typeof e.animate)return w(e,u.to),l(e),void f(e);const m=k(u,t.easing),p={duration:a,delay:d,easing:m.easing,fill:"both"};let g;try{g=e.animate(m.keyframes,p)}catch{g=e.animate(m.keyframes,{...p,easing:"ease"})}v.set(e,g),l(e),g.onfinish=()=>{if(v.get(e)===g){v.delete(e);try{g.commitStyles()}catch{w(e,u.to)}g.cancel()}f(e)}}function $(e,t){if(E(e),t.useClassNames)e.classList.add(t.hiddenClass),e.classList.remove(t.visibleClass);else{const t=e.style;t&&(t.opacity="0")}}function L(){if(!M){M=[];for(let e=0;e<=100;e++)M.push(e/100)}return M}const P={passive:!0};function T(e={}){let t={...s,...e};const o=new Map;let r=new WeakSet;const l=new Set;let d=0,u=null;const m=new Set,S=new Set,C=new Set,M=new Map;function T(e,t,n){let o=M.get(e);o||M.set(e,o=new Map);let r=o.get(t);return r||o.set(t,r=n()),r}function Y(e,n){const r=o.get(e);r&&(r.observer.unobserve(e),r.progressObserver?.unobserve(e),o.delete(e),z(e),"css"!==r.engine?n&&!r.animated&&A(e,t):n?(C.delete(e),A(e,t)):!1===e.isConnected&&C.delete(e))}function j(){o.forEach((e,t)=>{!1===t.isConnected&&Y(t,!1)})}function F(e,t,n){const o=t.options;if(o.onProgress(e,n),o.progressVar){const t=e.style;t&&t.setProperty(o.progressVar,String(+n.toFixed(4)))}}function N(){d=0,l.forEach(e=>{const n=o.get(e);n&&F(e,n,y(e,t.root))})}const R=()=>d||(d=requestAnimationFrame(N));function V(e){if(e===!!u)return;const n=e?"addEventListener":"removeEventListener",o=u||t.root||window;o[n]("scroll",R,P),window[n]("resize",R,P),u=e?o:null,!e&&d&&(cancelAnimationFrame(d),d=0)}function z(e){l.delete(e)&&!l.size&&V(!1)}function I(e){e.forEach(e=>{const n=e.target,r=o.get(n);r&&(e.isIntersecting?(l.add(n),V(!0)):z(n),F(n,r,y(n,t.root)))})}function W(e){const s=new Map;e.forEach(e=>{const a=e.target,i=o.get(a);if(!i)return;const c=i.options;if(!1!==a.isConnected)if("css"!==i.engine)if(e.isIntersecting){if(c.onEnter(a),i.animated&&!c.repeat)return;let e=0;if(c.stagger>0){const t=a.parentElement;e=s.get(t)??0,s.set(t,e+1)}O(a,c,t,e,S),i.animated=!0,c.once&&!c.repeat&&(i.observer.unobserve(a),t.autoUnregister&&!i.progressObserver&&(r.add(a),Y(a,!1)))}else c.onLeave(a),c.repeat&&i.animated&&(X(t)||(c.exit?function(e,t,o){if(o.useClassNames||"function"!=typeof e.animate)return void $(e,o);E(e);const r=n(!0===t.exit?t.animation:t.exit),s=k({from:r.to,to:r.from},t.easing),a={duration:t.duration,easing:s.easing,fill:"forwards"};let i;try{i=e.animate(s.keyframes,a)}catch{i=e.animate(s.keyframes,{...a,easing:"ease"})}v.set(e,i)}(a,c,t):$(a,t)),i.animated=!1);else e.isIntersecting?(c.onEnter(a),i.animated||(i.animated=!0,c.onStart(a)),c.once&&!c.repeat&&(i.observer.unobserve(a),t.autoUnregister&&!i.progressObserver&&(r.add(a),Y(a,!1)))):(c.onLeave(a),c.repeat&&(i.animated=!1));else Y(a,!1)})}function D(e){e.forEach(e=>{const t=o.get(e.target);t&&F(e.target,t,e.intersectionRatio)})}function q(e){const n=function(e,t){if(!t)return e;const n=(e||"0px").trim().split(/\s+/),o=n[0],r=n[1]??o,s=n[2]??o,a=n[3]??r,i=/^(-?\d*\.?\d+)(px)?$/.exec(s);return`${o} ${r} ${(i?parseFloat(i[1]):0)-t}px ${a}`}(e.rootMargin,e.offset),o=e.threshold,r=t.root;return T(r,`m|${n}|${String(o)}`,()=>new IntersectionObserver(W,{threshold:o,rootMargin:n,root:r}))}function H(e,n,o){var r;n.observer=q(n.options),o&&n.observer.observe(e),n.progressObserver=(r=n.options).onProgress!==a||r.progressVar?function(e){const n=t.root;return"scroll"===e.progressMode?T(n,`s|${e.rootMargin}`,()=>new IntersectionObserver(I,{threshold:0,rootMargin:e.rootMargin,root:n})):T(n,`p|${e.rootMargin}`,()=>new IntersectionObserver(D,{threshold:L(),rootMargin:e.rootMargin,root:n}))}(n.options):void 0,n.progressObserver?.observe(e)}function U(e){return"js"!==e.engine&&!t.useClassNames&&!X(t)&&(void 0===f&&(f=i()&&"undefined"!=typeof CSS&&"function"==typeof CSS.supports&&CSS.supports("animation-timeline: view()")&&"function"==typeof globalThis.ViewTimeline),f)}function B(e,s){if(o.has(e)||r.has(e))return;if(!c())return void A(e,t);const a={element:e,options:s,animated:!1,engine:"js"};U(s)&&(E(e),function(e,t,o){if("function"!=typeof e.animate)return null;const r=n(t.animation),s=k(r,t.easing);let a;try{const n=new globalThis.ViewTimeline({subject:e,axis:"block"}),o={fill:"both",easing:s.easing,timeline:n,rangeStart:t.viewRange[0],rangeEnd:t.viewRange[1]};try{a=e.animate(s.keyframes,o)}catch{a=e.animate(s.keyframes,{...o,easing:"linear"})}}catch{return null}if(v.set(e,a),t.exit){const o=n(!0===t.exit?t.animation:t.exit),r=k({from:o.to,to:o.from},t.easing);try{const t=new globalThis.ViewTimeline({subject:e,axis:"block"}),n={fill:"forwards",easing:r.easing,timeline:t,rangeStart:"exit 0%",rangeEnd:"exit 100%"};b.set(e,e.animate(r.keyframes,n))}catch{}}const i=t.repeat||!t.once;return a.onfinish=()=>{if(!i&&v.get(e)===a){v.delete(e);try{a.commitStyles()}catch{w(e,r.to)}a.cancel(),o?.()}t.onComplete(e)},a}(e,s,()=>C.delete(e))&&(a.engine="css",C.add(e))),"js"!==a.engine||X(t)||$(e,t),o.set(e,a),H(e,a,!0)}function J(e){o.has(e)||B(e,function(e,t){return g(p(t=>{const n=e.getAttribute(`data-sa-${t}`);return null===n?void 0:n}),t)}(e,t))}const G={observe(e,n={}){j();const o=g(n,t);h(e).forEach(e=>B(e,o))},unobserve(e){h(e).forEach(e=>{r.delete(e),Y(e,!0)})},init(e){const t=e??(i()?document:null);t&&(j(),t.querySelectorAll("[data-sa]").forEach(J))},watch(e){const t=e??(i()?document:null);if(!t||"undefined"==typeof MutationObserver)return a;G.init(t);const n=e=>{e.hasAttribute("data-sa")&&J(e),e.querySelectorAll("[data-sa]").forEach(J)},o=new MutationObserver(e=>{let t=!1;e.forEach(e=>{if("attributes"===e.type){const t=e.target;return void(!1!==t.isConnected&&n(t))}e.addedNodes.forEach(e=>{e instanceof Element&&!1!==e.isConnected&&n(e)}),e.removedNodes.length&&(t=!0)}),t&&j()});return o.observe(t,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["data-sa"]}),m.add(o),()=>{o.disconnect(),m.delete(o)}},destroy(){m.forEach(e=>e.disconnect()),m.clear(),S.forEach(e=>{const t=x.get(e);void 0!==t&&(clearTimeout(t),x.delete(e))}),S.clear(),o.forEach((e,n)=>{e.animated||"css"===e.engine||A(n,t)}),C.forEach(e=>{v.has(e)&&A(e,t)}),C.clear(),M.forEach(e=>e.forEach(e=>e.disconnect())),M.clear(),o.clear(),l.clear(),V(!1),r=new WeakSet},refresh(){M.forEach(e=>e.forEach(e=>e.disconnect())),M.clear(),l.clear(),V(!1),j(),c()&&o.forEach((e,t)=>{H(t,e,!(e.animated&&e.options.once&&!e.options.repeat))})},animate(e,n={}){const o=g(n,t);h(e).forEach(e=>O(e,o,t,0,S))},getObservedElements:()=>Array.from(o.values()),configure(e){t={...t,...e}}};return G}const Y=["animation","duration","delay","easing","threshold","root-margin","offset","once","repeat","stagger","engine","view-range","progress","progress-var","exit"];let j=null;function F(e="scroll-animate",t){if("undefined"==typeof customElements||"undefined"==typeof HTMLElement)return;const n=customElements.get(e);if(n)return n;const o=()=>t||j||(j=T());class r extends HTMLElement{constructor(){super(...arguments),this.observing=!1}static get observedAttributes(){return Y}emit(e,t){this.dispatchEvent(new CustomEvent(`sa:${e}`,{detail:t}))}get options(){return{...p(e=>{const t=this.getAttribute(e);return null===t?void 0:t}),onEnter:()=>this.emit("enter"),onLeave:()=>this.emit("leave"),onStart:()=>this.emit("start"),onComplete:()=>this.emit("complete"),...this.hasAttribute("progress")||this.hasAttribute("progress-var")?{onProgress:(e,t)=>this.emit("progress",{progress:t})}:{}}}connectedCallback(){this.style.display||"function"!=typeof getComputedStyle||"inline"!==(getComputedStyle(this).display||"inline")||(this.style.display="block"),o().observe(this,this.options),this.observing=!0}disconnectedCallback(){o().unobserve(this),this.observing=!1}attributeChangedCallback(){if(!this.observing)return;const e=o(),t=e.getObservedElements().find(e=>e.element===this);t&&!t.animated&&(e.unobserve(this),e.observe(this,this.options))}}return customElements.define(e,r),r}F(),e.defineScrollAnimate=F});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).ScrollAnimateElement={})}(this,function(e){"use strict";const t=(e=>{const t=globalThis,n=Symbol.for("use-scroll-animate.presets");return t[n]=Object.assign(t[n]||{},e)})({"fade-in":{from:{opacity:0},to:{opacity:1}},"fade-in-up":{from:{opacity:0,transform:"translateY(40px)"},to:{opacity:1,transform:"translateY(0px)"}},"fade-in-down":{from:{opacity:0,transform:"translateY(-40px)"},to:{opacity:1,transform:"translateY(0px)"}},"fade-in-left":{from:{opacity:0,transform:"translateX(-40px)"},to:{opacity:1,transform:"translateX(0px)"}},"fade-in-right":{from:{opacity:0,transform:"translateX(40px)"},to:{opacity:1,transform:"translateX(0px)"}},"zoom-in":{from:{opacity:0,transform:"scale(0.8)"},to:{opacity:1,transform:"scale(1)"}},"zoom-out":{from:{opacity:0,transform:"scale(1.2)"},to:{opacity:1,transform:"scale(1)"}},"flip-x":{from:{opacity:0,transform:"rotateX(-90deg)"},to:{opacity:1,transform:"rotateX(0deg)"}},"flip-y":{from:{opacity:0,transform:"rotateY(-90deg)"},to:{opacity:1,transform:"rotateY(0deg)"}},"slide-up":{from:{transform:"translateY(100%)"},to:{transform:"translateY(0px)"}},"slide-down":{from:{transform:"translateY(-100%)"},to:{transform:"translateY(0px)"}},"slide-left":{from:{transform:"translateX(-100%)"},to:{transform:"translateX(0px)"}},"slide-right":{from:{transform:"translateX(100%)"},to:{transform:"translateX(0px)"}},bounce:{from:{opacity:0,transform:"translateY(-60px)"},to:{opacity:1,transform:"translateY(0px)"}},"rotate-in":{from:{opacity:0,transform:"rotate(-180deg) scale(0.5)"},to:{opacity:1,transform:"rotate(0deg) scale(1)"}},"blur-in":{from:{opacity:0,filter:"blur(12px)"},to:{opacity:1,filter:"blur(0px)"}},"skew-in":{from:{opacity:0,transform:"skewX(20deg) translateX(30px)"},to:{opacity:1,transform:"skewX(0deg) translateX(0px)"}},"scale-x":{from:{transform:"scaleX(0)"},to:{transform:"scaleX(1)"}},"scale-y":{from:{transform:"scaleY(0)"},to:{transform:"scaleY(1)"}},shimmer:{from:{opacity:.5,filter:"brightness(1)"},to:{opacity:1,filter:"brightness(1.5)"}},pulse:{from:{transform:"scale(1)"},to:{transform:"scale(1.05)"}},swing:{from:{transform:"rotate(-10deg)"},to:{transform:"rotate(10deg)"}},"scale-up":{from:{opacity:0,transform:"scale(0.5)"},to:{opacity:1,transform:"scale(1)"}},"blur-in-up":{from:{opacity:0,filter:"blur(12px)",transform:"translateY(40px)"},to:{opacity:1,filter:"blur(0px)",transform:"translateY(0px)"}},"flip-up":{from:{opacity:0,transform:"perspective(800px) rotateX(60deg)"},to:{opacity:1,transform:"perspective(800px) rotateX(0deg)"}},"flip-down":{from:{opacity:0,transform:"perspective(800px) rotateX(-60deg)"},to:{opacity:1,transform:"perspective(800px) rotateX(0deg)"}},"rotate-left":{from:{opacity:0,transform:"rotate(-15deg) translateX(-40px)"},to:{opacity:1,transform:"rotate(0deg) translateX(0px)"}},"rotate-right":{from:{opacity:0,transform:"rotate(15deg) translateX(40px)"},to:{opacity:1,transform:"rotate(0deg) translateX(0px)"}},"clip-up":{from:{clipPath:"inset(100% 0% 0% 0%)"},to:{clipPath:"inset(0% 0% 0% 0%)"}},"clip-down":{from:{clipPath:"inset(0% 0% 100% 0%)"},to:{clipPath:"inset(0% 0% 0% 0%)"}},"clip-left":{from:{clipPath:"inset(0% 0% 0% 100%)"},to:{clipPath:"inset(0% 0% 0% 0%)"}},"clip-right":{from:{clipPath:"inset(0% 100% 0% 0%)"},to:{clipPath:"inset(0% 0% 0% 0%)"}},"clip-circle":{from:{clipPath:"circle(0% at 50% 50%)"},to:{clipPath:"circle(75% at 50% 50%)"}}});function n(e){return{from:e.to,to:e.from,frames:e.frames&&e.frames.map(e=>({...e,offset:1-e.offset})).reverse()}}const o=e=>t[e.trim()];function r(e){if("string"==typeof e)return o(e)??t["fade-in-up"];if(Array.isArray(e)){const t={from:{},to:{}};return e.forEach(e=>{const n=o(e);n&&(Object.entries(n.from).forEach(([e,n])=>{"transform"===e&&t.from[e]?t.from[e]=`${t.from[e]} ${n}`:t.from[e]=n}),Object.entries(n.to).forEach(([e,n])=>{"transform"===e&&t.to[e]?t.to[e]=`${t.to[e]} ${n}`:t.to[e]=n}))}),t}return e}const s={linear:"linear",ease:"ease","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out",spring:"cubic-bezier(0.34, 1.56, 0.64, 1)","soft-spring":"cubic-bezier(0.175, 0.885, 0.32, 1.275)","heavy-bounce":"cubic-bezier(0.68, -0.55, 0.265, 1.55)"};function a(e){return"string"==typeof e?s[e]??e:Array.isArray(e)?`cubic-bezier(${e.join(", ")})`:"function"==typeof e?"linear":"ease"}const i={defaultAnimation:"fade-in-up",defaultDuration:600,defaultDelay:0,defaultEasing:"ease",defaultThreshold:.1,defaultRootMargin:"0px",defaultRepeat:!1,defaultOnce:!0,defaultOffset:0,hiddenClass:"sa-hidden",visibleClass:"sa-visible",useClassNames:!1,disabled:!1,root:null,autoUnregister:!0,defaultEngine:"auto"},c=()=>{},l=()=>"undefined"!=typeof window&&"undefined"!=typeof document,f=()=>l()&&"undefined"!=typeof IntersectionObserver;let u,d;function m(e){if(void 0===e||""===e.trim())return;const t=parseFloat(e);return Number.isFinite(t)?t:void 0}const p=["entry 0%","entry 100%"];function g(e){const t=e.trim();return t?t.startsWith("--")?t:`--${t}`:"--sa-progress"}function h(e){const t={},n=e("animation");n&&(t.animation=n.includes(",")?n.split(",").map(e=>e.trim()):n.trim()),t.duration=m(e("duration")),t.delay=m(e("delay"));const o=e("easing");if(o){const e=o.trim();if(e.startsWith("["))try{t.easing=JSON.parse(e)}catch{}else t.easing=e}const r=e("threshold");r&&(t.threshold=r.includes(",")?r.split(",").map(parseFloat).filter(Number.isFinite):m(r));const s=e("root-margin");s&&(t.rootMargin=s);const a=e("repeat");void 0!==a&&(t.repeat="false"!==a);const i=e("once");void 0!==i&&(t.once="false"!==i),t.offset=m(e("offset")),t.stagger=m(e("stagger"));const c=e("progress-var");void 0!==c&&(t.progressVar=g(c));const l=e("engine")?.trim();"auto"!==l&&"js"!==l&&"css"!==l||(t.engine=l);const f=e("view-range");if(f){const[e,n]=f.split(",").map(e=>e.trim());e&&n&&(t.viewRange=[e,n])}const u=e("exit");if(void 0!==u){const e=u.trim();t.exit=""===e||"true"===e||"false"!==e&&(e.includes(",")?e.split(",").map(e=>e.trim()):e)}const d=e("progress");return d&&(t.progressMode="scroll"===d.trim()?"scroll":"ratio"),Object.keys(t).forEach(e=>void 0===t[e]&&delete t[e]),t}function y(e,t){let n=e.engine??t.defaultEngine;"auto"===n&&(void 0!==e.duration||void 0!==e.delay||void 0!==e.offset||(e.stagger??0)>0)&&(n="js");const o=e.exit??!1,r=e.repeat??(!!o||t.defaultRepeat),s=e.threshold??t.defaultThreshold;return{animation:e.animation??t.defaultAnimation,duration:e.duration??t.defaultDuration,delay:e.delay??t.defaultDelay,easing:e.easing??t.defaultEasing,threshold:Array.isArray(s)&&0===s.length?t.defaultThreshold:s,rootMargin:e.rootMargin??t.defaultRootMargin,repeat:r,once:e.once??(!r&&t.defaultOnce),offset:e.offset??t.defaultOffset,stagger:e.stagger??0,onStart:e.onStart??c,onComplete:e.onComplete??c,onEnter:e.onEnter??c,onLeave:e.onLeave??c,onProgress:e.onProgress??c,progressMode:e.progressMode??"ratio",progressVar:e.progressVar?g(e.progressVar):"",engine:n,viewRange:e.viewRange??p,exit:o}}function b(e){return e&&l()?"string"==typeof e?Array.from(document.querySelectorAll(e)):e instanceof Element?[e]:Array.isArray(e)||e instanceof NodeList?Array.from(e).filter(e=>e instanceof Element):[]:[]}function v(e,t){if(!l())return 0;const n=e.getBoundingClientRect();let o=0,r=window.innerHeight||document.documentElement.clientHeight||0;if(t){const e=t.getBoundingClientRect();o=e.top,r=e.height}const s=r+n.height;if(s<=0)return 0;const a=(o+r-n.top)/s;return a<0?0:a>1?1:a}const x=new WeakMap,E=new WeakMap,w=new WeakMap;function S(e){const t=E.get(e);t&&(E.delete(e),t.cancel());const n=x.get(e);n&&(x.delete(e),n.onfinish=null,n.cancel());const o=w.get(e);void 0!==o&&(clearTimeout(o),w.delete(e))}function C(e,t){const n=e.style;n&&Object.keys(t).forEach(e=>{n[e]=String(t[e])})}const M=/(-?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?)([a-z%]*)/gi;let k,A;function O(){return void 0===k&&(k="undefined"!=typeof CSS&&"function"==typeof CSS.supports&&CSS.supports("animation-timing-function","linear(0, 1)")),k}function X(e,t){const n=[e.from,...e.frames||[],e.to];if("function"!=typeof t)return{keyframes:n,easing:a(t)};const o=function(e){const t=[];for(let n=0;n<=30;n++){const o=e(n/30);t.push(Number.isFinite(o)?+o.toFixed(4):n/30)}return t}(t);if(O()||e.frames)return{keyframes:n,easing:O()?`linear(${o.join(", ")})`:"ease"};const r=Object.keys(e.from).filter(t=>t in e.to);return{keyframes:o.map((t,n)=>{const o={offset:n/30};return r.forEach(n=>{o[n]=function(e,t,n){if("number"==typeof e&&"number"==typeof t)return e+(t-e)*n;const o=String(e),r=String(t),s=[],a=[],i=o.replace(M,(e,t,n)=>(s.push([parseFloat(t),n]),"#"));if(i!==r.replace(M,(e,t,n)=>(a.push([parseFloat(t),n]),"#"))||s.length!==a.length)return n<.5?e:t;let c=0,l=!0;const f=i.replace(/#/g,()=>{const[e,t]=s[c],[o,r]=a[c++];t!==r&&0!==e&&0!==o&&t&&r&&(l=!1);const i=t||r;return`${+(e+(o-e)*n).toFixed(4)}${i}`});return l?f:n<.5?e:t}(e.from[n],e.to[n],t)}),o}),easing:"linear"}}function $(e,t){if(S(e),t.useClassNames)e.classList.remove(t.hiddenClass),e.classList.add(t.visibleClass);else{const t=e.style;t&&(t.opacity="")}}function L(e){return!!e.disabled||!!l()&&(void 0===u&&(u="function"==typeof window.matchMedia?window.matchMedia("(prefers-reduced-motion: reduce)"):null),!!u&&u.matches)}function T(e,t,n,o=0,s){const{duration:a,delay:i,stagger:c,onStart:l,onComplete:f}=t,u=Math.max(0,i+o*c);if(S(e),L(n))return $(e,n),l(e),void f(e);if(n.useClassNames)return u>0&&(e.style.animationDelay=`${u}ms`),e.classList.remove(n.hiddenClass),e.classList.add(n.visibleClass),l(e),s?.add(e),void w.set(e,setTimeout(()=>{w.delete(e),s?.delete(e),f(e)},a+u));const d=r(t.animation);if(!("opacity"in d.to)){const t=e.style;t&&"0"===t.opacity&&(t.opacity="")}if("function"!=typeof e.animate)return C(e,d.to),l(e),void f(e);const m=X(d,t.easing),p={duration:a,delay:u,easing:m.easing,fill:"both"};let g;try{g=e.animate(m.keyframes,p)}catch{g=e.animate(m.keyframes,{...p,easing:"ease"})}x.set(e,g),l(e),g.onfinish=()=>{if(x.get(e)===g){x.delete(e);try{g.commitStyles()}catch{C(e,d.to)}g.cancel()}f(e)}}function j(e,t){if(S(e),t.useClassNames)e.classList.add(t.hiddenClass),e.classList.remove(t.visibleClass);else{const t=e.style;t&&(t.opacity="0")}}function P(){if(!A){A=[];for(let e=0;e<=100;e++)A.push(e/100)}return A}const Y={passive:!0};function F(e={}){let t={...i,...e};const o=new Map;let s=new WeakSet;const a=new Set;let u=0,m=null;const p=new Set,g=new Set,M=new Set,k=new Map;function A(e,t,n){let o=k.get(e);o||k.set(e,o=new Map);let r=o.get(t);return r||o.set(t,r=n()),r}function O(e,n){const r=o.get(e);r&&(r.observer.unobserve(e),r.progressObserver?.unobserve(e),o.delete(e),I(e),"css"!==r.engine?n&&!r.animated&&$(e,t):n?(M.delete(e),$(e,t)):!1===e.isConnected&&M.delete(e))}function F(){o.forEach((e,t)=>{!1===t.isConnected&&O(t,!1)})}function N(e,t,n){const o=t.options;if(o.onProgress(e,n),o.progressVar){const t=e.style;t&&t.setProperty(o.progressVar,String(+n.toFixed(4)))}}function R(){u=0,a.forEach(e=>{const n=o.get(e);n&&N(e,n,v(e,t.root))})}const V=()=>u||(u=requestAnimationFrame(R));function z(e){if(e===!!m)return;const n=e?"addEventListener":"removeEventListener",o=m||t.root||window;o[n]("scroll",V,Y),window[n]("resize",V,Y),m=e?o:null,!e&&u&&(cancelAnimationFrame(u),u=0)}function I(e){a.delete(e)&&!a.size&&z(!1)}function W(e){e.forEach(e=>{const n=e.target,r=o.get(n);r&&(e.isIntersecting?(a.add(n),z(!0)):I(n),N(n,r,v(n,t.root)))})}function D(e){const a=new Map;e.forEach(e=>{const i=e.target,c=o.get(i);if(!c)return;const l=c.options;if(!1!==i.isConnected)if("css"!==c.engine)if(e.isIntersecting){if(l.onEnter(i),c.animated&&!l.repeat)return;let e=0;if(l.stagger>0){const t=i.parentElement;e=a.get(t)??0,a.set(t,e+1)}T(i,l,t,e,g),c.animated=!0,l.once&&!l.repeat&&(c.observer.unobserve(i),t.autoUnregister&&!c.progressObserver&&(s.add(i),O(i,!1)))}else l.onLeave(i),l.repeat&&c.animated&&(L(t)||(l.exit?function(e,t,o){if(o.useClassNames||"function"!=typeof e.animate)return void j(e,o);S(e);const s=X(n(r(!0===t.exit?t.animation:t.exit)),t.easing),a={duration:t.duration,easing:s.easing,fill:"forwards"};let i;try{i=e.animate(s.keyframes,a)}catch{i=e.animate(s.keyframes,{...a,easing:"ease"})}x.set(e,i)}(i,l,t):j(i,t)),c.animated=!1);else e.isIntersecting?(l.onEnter(i),c.animated||(c.animated=!0,l.onStart(i)),l.once&&!l.repeat&&(c.observer.unobserve(i),t.autoUnregister&&!c.progressObserver&&(s.add(i),O(i,!1)))):(l.onLeave(i),l.repeat&&(c.animated=!1));else O(i,!1)})}function q(e){e.forEach(e=>{const t=o.get(e.target);t&&N(e.target,t,e.intersectionRatio)})}function H(e){const n=function(e,t){if(!t)return e;const n=(e||"0px").trim().split(/\s+/),o=n[0],r=n[1]??o,s=n[2]??o,a=n[3]??r,i=/^(-?\d*\.?\d+)(px)?$/.exec(s);return`${o} ${r} ${(i?parseFloat(i[1]):0)-t}px ${a}`}(e.rootMargin,e.offset),o=e.threshold,r=t.root;return A(r,`m|${n}|${String(o)}`,()=>new IntersectionObserver(D,{threshold:o,rootMargin:n,root:r}))}function U(e,n,o){var r;n.observer=H(n.options),o&&n.observer.observe(e),n.progressObserver=(r=n.options).onProgress!==c||r.progressVar?function(e){const n=t.root;return"scroll"===e.progressMode?A(n,`s|${e.rootMargin}`,()=>new IntersectionObserver(W,{threshold:0,rootMargin:e.rootMargin,root:n})):A(n,`p|${e.rootMargin}`,()=>new IntersectionObserver(q,{threshold:P(),rootMargin:e.rootMargin,root:n}))}(n.options):void 0,n.progressObserver?.observe(e)}function B(e){return"js"!==e.engine&&!t.useClassNames&&!L(t)&&(void 0===d&&(d=l()&&"undefined"!=typeof CSS&&"function"==typeof CSS.supports&&CSS.supports("animation-timeline: view()")&&"function"==typeof globalThis.ViewTimeline),d)}function J(e,a){if(o.has(e)||s.has(e))return;if(!f())return void $(e,t);const i={element:e,options:a,animated:!1,engine:"js"};B(a)&&(S(e),function(e,t,o){if("function"!=typeof e.animate)return null;const s=r(t.animation),a=X(s,t.easing);let i;try{const n=new globalThis.ViewTimeline({subject:e,axis:"block"}),o={fill:"both",easing:a.easing,timeline:n,rangeStart:t.viewRange[0],rangeEnd:t.viewRange[1]};try{i=e.animate(a.keyframes,o)}catch{i=e.animate(a.keyframes,{...o,easing:"linear"})}}catch{return null}if(x.set(e,i),t.exit){const o=X(n(r(!0===t.exit?t.animation:t.exit)),t.easing);try{const t=new globalThis.ViewTimeline({subject:e,axis:"block"}),n={fill:"forwards",easing:o.easing,timeline:t,rangeStart:"exit 0%",rangeEnd:"exit 100%"};E.set(e,e.animate(o.keyframes,n))}catch{}}const c=t.repeat||!t.once;return i.onfinish=()=>{if(!c&&x.get(e)===i){x.delete(e);try{i.commitStyles()}catch{C(e,s.to)}i.cancel(),o?.()}t.onComplete(e)},i}(e,a,()=>M.delete(e))&&(i.engine="css",M.add(e))),"js"!==i.engine||L(t)||j(e,t),o.set(e,i),U(e,i,!0)}function G(e){o.has(e)||J(e,function(e,t){return y(h(t=>{const n=e.getAttribute(`data-sa-${t}`);return null===n?void 0:n}),t)}(e,t))}const K={observe(e,n={}){F();const o=y(n,t);b(e).forEach(e=>J(e,o))},unobserve(e){b(e).forEach(e=>{s.delete(e),O(e,!0)})},init(e){const t=e??(l()?document:null);t&&(F(),t.querySelectorAll("[data-sa]").forEach(G))},watch(e){const t=e??(l()?document:null);if(!t||"undefined"==typeof MutationObserver)return c;K.init(t);const n=e=>{e.hasAttribute("data-sa")&&G(e),e.querySelectorAll("[data-sa]").forEach(G)},o=new MutationObserver(e=>{let t=!1;e.forEach(e=>{if("attributes"===e.type){const t=e.target;return void(!1!==t.isConnected&&n(t))}e.addedNodes.forEach(e=>{e instanceof Element&&!1!==e.isConnected&&n(e)}),e.removedNodes.length&&(t=!0)}),t&&F()});return o.observe(t,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["data-sa"]}),p.add(o),()=>{o.disconnect(),p.delete(o)}},destroy(){p.forEach(e=>e.disconnect()),p.clear(),g.forEach(e=>{const t=w.get(e);void 0!==t&&(clearTimeout(t),w.delete(e))}),g.clear(),o.forEach((e,n)=>{e.animated||"css"===e.engine||$(n,t)}),M.forEach(e=>{x.has(e)&&$(e,t)}),M.clear(),k.forEach(e=>e.forEach(e=>e.disconnect())),k.clear(),o.clear(),a.clear(),z(!1),s=new WeakSet},refresh(){k.forEach(e=>e.forEach(e=>e.disconnect())),k.clear(),a.clear(),z(!1),F(),f()&&o.forEach((e,t)=>{U(t,e,!(e.animated&&e.options.once&&!e.options.repeat))})},animate(e,n={}){const o=y(n,t);b(e).forEach(e=>T(e,o,t,0,g))},getObservedElements:()=>Array.from(o.values()),configure(e){t={...t,...e}}};return K}const N=["animation","duration","delay","easing","threshold","root-margin","offset","once","repeat","stagger","engine","view-range","progress","progress-var","exit"];let R=null;function V(e="scroll-animate",t){if("undefined"==typeof customElements||"undefined"==typeof HTMLElement)return;const n=customElements.get(e);if(n)return n;const o=()=>t||R||(R=F());class r extends HTMLElement{constructor(){super(...arguments),this.observing=!1}static get observedAttributes(){return N}emit(e,t){this.dispatchEvent(new CustomEvent(`sa:${e}`,{detail:t}))}get options(){return{...h(e=>{const t=this.getAttribute(e);return null===t?void 0:t}),onEnter:()=>this.emit("enter"),onLeave:()=>this.emit("leave"),onStart:()=>this.emit("start"),onComplete:()=>this.emit("complete"),...this.hasAttribute("progress")||this.hasAttribute("progress-var")?{onProgress:(e,t)=>this.emit("progress",{progress:t})}:{}}}connectedCallback(){this.style.display||"function"!=typeof getComputedStyle||"inline"!==(getComputedStyle(this).display||"inline")||(this.style.display="block"),o().observe(this,this.options),this.observing=!0}disconnectedCallback(){o().unobserve(this),this.observing=!1}attributeChangedCallback(){if(!this.observing)return;const e=o(),t=e.getObservedElements().find(e=>e.element===this);t&&!t.animated&&(e.unobserve(this),e.observe(this,this.options))}}return customElements.define(e,r),r}V(),e.defineScrollAnimate=V});
 //# sourceMappingURL=element.umd.js.map