use-scroll-animate 2.9.0 → 3.1.0

package/dist/element.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var core = require('./chunks/core-C1cEwjJj.cjs');
+var core = require('./chunks/core-qpECfEkb.cjs');
 
 /**
  * use-scroll-animate - `<scroll-animate>` Web Component
@@ -16,14 +16,13 @@ var core = require('./chunks/core-C1cEwjJj.cjs');
  * Attributes mirror the `data-sa-*` attributes without the prefix
  * (`animation`, `duration`, `delay`, `easing`, `threshold`, `root-margin`,
  * `offset`, `once`, `repeat`, `engine`, `view-range`, `progress`,
- * `progress-var`, `exit`, `parallax-*`). The element dispatches `sa:enter`,
+ * `progress-var`, `exit`). The element dispatches `sa:enter`,
  * `sa:leave`, `sa:start`, `sa:complete` and `sa:progress` (`detail.progress`)
  * events. It renders as `display: block` unless styled otherwise.
  */
 const ATTRIBUTES = [
     'animation', 'duration', 'delay', 'easing', 'threshold', 'root-margin', 'offset', 'once', 'repeat',
     'stagger', 'engine', 'view-range', 'progress', 'progress-var', 'exit',
-    'parallax-x', 'parallax-y', 'parallax-rotate', 'parallax-scale', 'parallax-speed',
 ];
 let shared = null;
 /**

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`, `parallax-*`). 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  'parallax-x', 'parallax-y', 'parallax-rotate', 'parallax-scale', 'parallax-speed',\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

@@ -5,7 +5,7 @@
 /** 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';
 /**
- * How `onProgress` (and parallax) progress is measured.
+ * How `onProgress` / `progressVar` progress is measured.
  * - `'ratio'` (default): the element's visible ratio (IntersectionObserver `intersectionRatio`).
  * - `'scroll'`: true scroll progress, 0 when the element's top touches the bottom of the
  *   viewport and 1 when its bottom leaves the top. Works for elements taller than the screen.
@@ -33,19 +33,6 @@ interface CustomAnimation {
     from: AnimationKeyframe;
     to: AnimationKeyframe;
 }
-/** Parallax configuration */
-interface ParallaxOptions {
-    /** Movement on X axis (e.g., '100px', '20%') */
-    x?: string | number;
-    /** Movement on Y axis (e.g., '100px', '20%') */
-    y?: string | number;
-    /** Rotation in degrees */
-    rotate?: number;
-    /** Scale factor */
-    scale?: number;
-    /** Speed multiplier (default: 1) */
-    speed?: number;
-}
 /** Per-element animation options */
 interface AnimateOptions {
     /** Animation preset name, array of presets, or custom animation object */
@@ -68,8 +55,6 @@ interface AnimateOptions {
     offset?: number;
     /** Stagger delay for child elements in ms (default: 0) */
     stagger?: number;
-    /** Parallax effect configuration */
-    parallax?: ParallaxOptions;
     /** Callback fired when animation starts */
     onStart?: (element: Element) => void;
     /** Callback fired when animation completes */
@@ -80,7 +65,7 @@ interface AnimateOptions {
     onLeave?: (element: Element) => void;
     /** Callback fired with scroll progress (0 to 1) */
     onProgress?: (element: Element, progress: number) => void;
-    /** How progress for `onProgress`/parallax is measured (default: 'ratio') */
+    /** How progress for `onProgress`/`progressVar` is measured (default: 'ratio') */
     progressMode?: ProgressMode;
     /**
      * Name of a CSS custom property (e.g. `'--sa-progress'`) that receives the
@@ -141,7 +126,7 @@ interface ScrollAnimateConfig {
     root?: Element | null;
     /**
      * Drop `once` elements from the registry as soon as their entrance animation
-     * has been triggered (unless they still need parallax/onProgress), so they can
+     * has been triggered (unless they still need onProgress/progressVar), so they can
      * be garbage-collected. They are remembered in a WeakSet, so `init()`/`observe()`
      * never re-hide or replay them. (default: true)
      */
@@ -201,7 +186,7 @@ interface ScrollAnimateInstance {
  * Attributes mirror the `data-sa-*` attributes without the prefix
  * (`animation`, `duration`, `delay`, `easing`, `threshold`, `root-margin`,
  * `offset`, `once`, `repeat`, `engine`, `view-range`, `progress`,
- * `progress-var`, `exit`, `parallax-*`). The element dispatches `sa:enter`,
+ * `progress-var`, `exit`). The element dispatches `sa:enter`,
  * `sa:leave`, `sa:start`, `sa:complete` and `sa:progress` (`detail.progress`)
  * events. It renders as `display: block` unless styled otherwise.
  */

package/dist/element.d.ts

@@ -5,7 +5,7 @@
 /** 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';
 /**
- * How `onProgress` (and parallax) progress is measured.
+ * How `onProgress` / `progressVar` progress is measured.
  * - `'ratio'` (default): the element's visible ratio (IntersectionObserver `intersectionRatio`).
  * - `'scroll'`: true scroll progress, 0 when the element's top touches the bottom of the
  *   viewport and 1 when its bottom leaves the top. Works for elements taller than the screen.
@@ -33,19 +33,6 @@ interface CustomAnimation {
     from: AnimationKeyframe;
     to: AnimationKeyframe;
 }
-/** Parallax configuration */
-interface ParallaxOptions {
-    /** Movement on X axis (e.g., '100px', '20%') */
-    x?: string | number;
-    /** Movement on Y axis (e.g., '100px', '20%') */
-    y?: string | number;
-    /** Rotation in degrees */
-    rotate?: number;
-    /** Scale factor */
-    scale?: number;
-    /** Speed multiplier (default: 1) */
-    speed?: number;
-}
 /** Per-element animation options */
 interface AnimateOptions {
     /** Animation preset name, array of presets, or custom animation object */
@@ -68,8 +55,6 @@ interface AnimateOptions {
     offset?: number;
     /** Stagger delay for child elements in ms (default: 0) */
     stagger?: number;
-    /** Parallax effect configuration */
-    parallax?: ParallaxOptions;
     /** Callback fired when animation starts */
     onStart?: (element: Element) => void;
     /** Callback fired when animation completes */
@@ -80,7 +65,7 @@ interface AnimateOptions {
     onLeave?: (element: Element) => void;
     /** Callback fired with scroll progress (0 to 1) */
     onProgress?: (element: Element, progress: number) => void;
-    /** How progress for `onProgress`/parallax is measured (default: 'ratio') */
+    /** How progress for `onProgress`/`progressVar` is measured (default: 'ratio') */
     progressMode?: ProgressMode;
     /**
      * Name of a CSS custom property (e.g. `'--sa-progress'`) that receives the
@@ -141,7 +126,7 @@ interface ScrollAnimateConfig {
     root?: Element | null;
     /**
      * Drop `once` elements from the registry as soon as their entrance animation
-     * has been triggered (unless they still need parallax/onProgress), so they can
+     * has been triggered (unless they still need onProgress/progressVar), so they can
      * be garbage-collected. They are remembered in a WeakSet, so `init()`/`observe()`
      * never re-hide or replay them. (default: true)
      */
@@ -201,7 +186,7 @@ interface ScrollAnimateInstance {
  * Attributes mirror the `data-sa-*` attributes without the prefix
  * (`animation`, `duration`, `delay`, `easing`, `threshold`, `root-margin`,
  * `offset`, `once`, `repeat`, `engine`, `view-range`, `progress`,
- * `progress-var`, `exit`, `parallax-*`). The element dispatches `sa:enter`,
+ * `progress-var`, `exit`). The element dispatches `sa:enter`,
  * `sa:leave`, `sa:start`, `sa:complete` and `sa:progress` (`detail.progress`)
  * events. It renders as `display: block` unless styled otherwise.
  */

package/dist/element.js

@@ -1,4 +1,4 @@
-import { r as readOptions, c as createScrollAnimate } from './chunks/core-J_KM443q.js';
+import { r as readOptions, c as createScrollAnimate } from './chunks/core-mV_TPgG_.js';
 
 /**
  * use-scroll-animate - `<scroll-animate>` Web Component
@@ -14,14 +14,13 @@ import { r as readOptions, c as createScrollAnimate } from './chunks/core-J_KM44
  * Attributes mirror the `data-sa-*` attributes without the prefix
  * (`animation`, `duration`, `delay`, `easing`, `threshold`, `root-margin`,
  * `offset`, `once`, `repeat`, `engine`, `view-range`, `progress`,
- * `progress-var`, `exit`, `parallax-*`). The element dispatches `sa:enter`,
+ * `progress-var`, `exit`). The element dispatches `sa:enter`,
  * `sa:leave`, `sa:start`, `sa:complete` and `sa:progress` (`detail.progress`)
  * events. It renders as `display: block` unless styled otherwise.
  */
 const ATTRIBUTES = [
     'animation', 'duration', 'delay', 'easing', 'threshold', 'root-margin', 'offset', 'once', 'repeat',
     'stagger', 'engine', 'view-range', 'progress', 'progress-var', 'exit',
-    'parallax-x', 'parallax-y', 'parallax-rotate', 'parallax-scale', 'parallax-speed',
 ];
 let shared = null;
 /**

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`, `parallax-*`). 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  'parallax-x', 'parallax-y', 'parallax-rotate', 'parallax-scale', 'parallax-speed',\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 r=t[e.trim()];r&&(Object.entries(r.from).forEach(([e,t])=>{"transform"===e&&n.from[e]?n.from[e]=`${n.from[e]} ${t}`:n.from[e]=t}),Object.entries(r.to).forEach(([e,t])=>{"transform"===e&&n.to[e]?n.to[e]=`${n.to[e]} ${t}`:n.to[e]=t}))}),n}return e}const r={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 o(e){return"string"==typeof e?r[e]??e:Array.isArray(e)?`cubic-bezier(${e.join(", ")})`:"function"==typeof e?"linear":"ease"}const a={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"},s=()=>{},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}function p(e){if(void 0===e||""===e.trim())return;const t=e.trim();return/^-?(\d+\.?\d*|\.\d+)$/.test(t)?parseFloat(t):t}const u=["entry 0%","entry 100%"];function m(e){const t=e.trim();return t?t.startsWith("--")?t:`--${t}`:"--sa-progress"}function g(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 r=e("easing");if(r){const e=r.trim();if(e.startsWith("["))try{t.easing=JSON.parse(e)}catch{}else t.easing=e}const o=e("threshold");o&&(t.threshold=o.includes(",")?o.split(",").map(parseFloat).filter(Number.isFinite):d(o));const a=e("root-margin");a&&(t.rootMargin=a);const s=e("repeat");void 0!==s&&(t.repeat="false"!==s);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 g=e("progress");g&&(t.progressMode="scroll"===g.trim()?"scroll":"ratio");const h=e("parallax-x"),y=e("parallax-y"),b=e("parallax-rotate"),v=e("parallax-scale");return(h||y||b||v)&&(t.parallax={x:p(h),y:p(y),rotate:d(b),scale:d(v),speed:d(e("parallax-speed"))??1}),Object.keys(t).forEach(e=>void 0===t[e]&&delete t[e]),t}function h(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 r=e.exit??!1,o=e.repeat??(!!r||t.defaultRepeat),a=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(a)&&0===a.length?t.defaultThreshold:a,rootMargin:e.rootMargin??t.defaultRootMargin,repeat:o,once:e.once??(!o&&t.defaultOnce),offset:e.offset??t.defaultOffset,stagger:e.stagger??0,parallax:T(e.parallax)??{},onStart:e.onStart??s,onComplete:e.onComplete??s,onEnter:e.onEnter??s,onLeave:e.onLeave??s,onProgress:e.onProgress??s,progressMode:e.progressMode??"ratio",progressVar:e.progressVar?m(e.progressVar):"",engine:n,viewRange:e.viewRange??u,exit:r}}function y(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 b(e){return!!e&&Object.keys(e).some(t=>void 0!==e[t])}function v(e,t){if(!i())return 0;const n=e.getBoundingClientRect();let r=0,o=window.innerHeight||document.documentElement.clientHeight||0;if(t){const e=t.getBoundingClientRect();r=e.top,o=e.height}const a=o+n.height;if(a<=0)return 0;const s=(r+o-n.top)/a;return s<0?0:s>1?1:s}const x=new WeakMap,w=new WeakMap,E=new WeakMap;function S(e){const t=w.get(e);t&&(w.delete(e),t.cancel());const n=x.get(e);n&&(x.delete(e),n.onfinish=null,n.cancel());const r=E.get(e);void 0!==r&&(clearTimeout(r),E.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;function $(e,t){if("function"!=typeof t)return{keyframes:[e.from,e.to],easing:o(t)};const n=function(e){const t=[];for(let n=0;n<=30;n++){const r=e(n/30);t.push(Number.isFinite(r)?+r.toFixed(4):n/30)}return t}(t);if(void 0===k&&(k="undefined"!=typeof CSS&&"function"==typeof CSS.supports&&CSS.supports("animation-timing-function","linear(0, 1)")),k)return{keyframes:[e.from,e.to],easing:`linear(${n.join(", ")})`};const r=Object.keys(e.from).filter(t=>t in e.to);return{keyframes:n.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 r=String(e),o=String(t),a=[],s=[],i=r.replace(M,(e,t,n)=>(a.push([parseFloat(t),n]),"#"));if(i!==o.replace(M,(e,t,n)=>(s.push([parseFloat(t),n]),"#"))||a.length!==s.length)return n<.5?e:t;let c=0,l=!0;const f=i.replace(/#/g,()=>{const[e,t]=a[c],[r,o]=s[c++];t!==o&&0!==e&&0!==r&&t&&o&&(l=!1);const i=t||o;return`${+(e+(r-e)*n).toFixed(4)}${i}`});return l?f:n<.5?e:t}(e.from[n],e.to[n],t)}),o}),easing:"linear"}}function A(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 O(e){return!!e.disabled||!!i()&&(void 0===l&&(l="function"==typeof window.matchMedia?window.matchMedia("(prefers-reduced-motion: reduce)"):null),!!l&&l.matches)}function X(e,t,r,o=0,a){const{duration:s,delay:i,stagger:c,onStart:l,onComplete:f}=t,d=Math.max(0,i+o*c);if(S(e),O(r))return A(e,r),l(e),void f(e);if(r.useClassNames)return d>0&&(e.style.animationDelay=`${d}ms`),e.classList.remove(r.hiddenClass),e.classList.add(r.visibleClass),l(e),a?.add(e),void E.set(e,setTimeout(()=>{E.delete(e),a?.delete(e),f(e)},s+d));const p=n(t.animation);if(!("opacity"in p.to)){const t=e.style;t&&"0"===t.opacity&&(t.opacity="")}if("function"!=typeof e.animate)return C(e,p.to),l(e),void f(e);const u=$(p,t.easing),m={duration:s,delay:d,easing:u.easing,fill:"both"};let g;try{g=e.animate(u.keyframes,m)}catch{g=e.animate(u.keyframes,{...m,easing:"ease"})}x.set(e,g),l(e),g.onfinish=()=>{if(x.get(e)===g){x.delete(e);try{g.commitStyles()}catch{C(e,p.to)}g.cancel()}f(e)}}let j,L=!1;function T(e){return e&&!L&&"undefined"!=typeof console&&Object.keys(e).length&&(L=!0,console.warn("[use-scroll-animate] The `parallax` option / data-sa-parallax-* attributes are deprecated and removed in 3.0. Use parallax(el, { speed }) or progressVar instead.")),e}function Y(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(!j){j=[];for(let e=0;e<=100;e++)j.push(e/100)}return j}const F={passive:!0};function N(e={}){let t={...a,...e};const r=new Map;let o=new WeakSet;const l=new Set;let d=0,p=null;const u=new Set,m=new Set,M=new Set,k=new Map;function j(e,t,n){let r=k.get(e);r||k.set(e,r=new Map);let o=r.get(t);return o||r.set(t,o=n()),o}function L(e,n){const o=r.get(e);o&&(o.observer.unobserve(e),o.progressObserver?.unobserve(e),r.delete(e),I(e),"css"!==o.engine?n&&!o.animated&&A(e,t):n?(M.delete(e),A(e,t)):!1===e.isConnected&&M.delete(e))}function T(){r.forEach((e,t)=>{!1===t.isConnected&&L(t,!1)})}function N(e,n,r){const o=n.options;if(o.onProgress(e,r),o.progressVar){const t=e.style;t&&t.setProperty(o.progressVar,String(+r.toFixed(4)))}b(o.parallax)&&!O(t)&&function(e,t,n){const{x:r=0,y:o=0,rotate:a=0,scale:s=1,speed:i=1}=n,c=2*(t-.5)*i,l=e=>"number"==typeof e?e*c+"px":`calc(${e} * ${c})`;let f="";r&&(f+=` translateX(${l(r)})`),o&&(f+=` translateY(${l(o)})`),a&&(f+=` rotate(${a*c}deg)`),1!==s&&(f+=` scale(${1+(s-1)*c})`),e.style.transform=f.trim()}(e,r,o.parallax)}function R(){d=0,l.forEach(e=>{const n=r.get(e);n&&N(e,n,v(e,t.root))})}const V=()=>d||(d=requestAnimationFrame(R));function z(e){if(e===!!p)return;const n=e?"addEventListener":"removeEventListener",r=p||t.root||window;r[n]("scroll",V,F),window[n]("resize",V,F),p=e?r:null,!e&&d&&(cancelAnimationFrame(d),d=0)}function I(e){l.delete(e)&&!l.size&&z(!1)}function W(e){e.forEach(e=>{const n=e.target,o=r.get(n);o&&(e.isIntersecting?(l.add(n),z(!0)):I(n),N(n,o,v(n,t.root)))})}function D(e){const a=new Map;e.forEach(e=>{const s=e.target,i=r.get(s);if(!i)return;const c=i.options;if(!1!==s.isConnected)if("css"!==i.engine)if(e.isIntersecting){if(c.onEnter(s),i.animated&&!c.repeat)return;let e=0;if(c.stagger>0){const t=s.parentElement;e=a.get(t)??0,a.set(t,e+1)}X(s,c,t,e,m),i.animated=!0,c.once&&!c.repeat&&(i.observer.unobserve(s),t.autoUnregister&&!i.progressObserver&&(o.add(s),L(s,!1)))}else c.onLeave(s),c.repeat&&i.animated&&(O(t)||(c.exit?function(e,t,r){if(r.useClassNames||"function"!=typeof e.animate)return void Y(e,r);S(e);const o=n(!0===t.exit?t.animation:t.exit),a=$({from:o.to,to:o.from},t.easing),s={duration:t.duration,easing:a.easing,fill:"forwards"};let i;try{i=e.animate(a.keyframes,s)}catch{i=e.animate(a.keyframes,{...s,easing:"ease"})}x.set(e,i)}(s,c,t):Y(s,t)),i.animated=!1);else e.isIntersecting?(c.onEnter(s),i.animated||(i.animated=!0,c.onStart(s)),c.once&&!c.repeat&&(i.observer.unobserve(s),t.autoUnregister&&!i.progressObserver&&(o.add(s),L(s,!1)))):(c.onLeave(s),c.repeat&&(i.animated=!1));else L(s,!1)})}function q(e){e.forEach(e=>{const t=r.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+/),r=n[0],o=n[1]??r,a=n[2]??r,s=n[3]??o,i=/^(-?\d*\.?\d+)(px)?$/.exec(a);return`${r} ${o} ${(i?parseFloat(i[1]):0)-t}px ${s}`}(e.rootMargin,e.offset),r=e.threshold,o=t.root;return j(o,`m|${n}|${String(r)}`,()=>new IntersectionObserver(D,{threshold:r,rootMargin:n,root:o}))}function U(e,n,r){var o;n.observer=H(n.options),r&&n.observer.observe(e),n.progressObserver=b((o=n.options).parallax)||o.onProgress!==s||o.progressVar?function(e){const n=t.root;return"scroll"===e.progressMode?j(n,`s|${e.rootMargin}`,()=>new IntersectionObserver(W,{threshold:0,rootMargin:e.rootMargin,root:n})):j(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&&!O(t)&&(void 0===f&&(f=i()&&"undefined"!=typeof CSS&&"function"==typeof CSS.supports&&CSS.supports("animation-timeline: view()")&&"function"==typeof globalThis.ViewTimeline),f)}function J(e,a){if(r.has(e)||o.has(e))return;if(!c())return void A(e,t);const s={element:e,options:a,animated:!1,engine:"js"};B(a)&&(S(e),function(e,t,r){if("function"!=typeof e.animate)return null;const o=n(t.animation),a=$(o,t.easing);let s;try{const n=new globalThis.ViewTimeline({subject:e,axis:"block"}),r={fill:"both",easing:a.easing,timeline:n,rangeStart:t.viewRange[0],rangeEnd:t.viewRange[1]};try{s=e.animate(a.keyframes,r)}catch{s=e.animate(a.keyframes,{...r,easing:"linear"})}}catch{return null}if(x.set(e,s),t.exit){const r=n(!0===t.exit?t.animation:t.exit),o=$({from:r.to,to:r.from},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%"};w.set(e,e.animate(o.keyframes,n))}catch{}}const i=t.repeat||!t.once;return s.onfinish=()=>{if(!i&&x.get(e)===s){x.delete(e);try{s.commitStyles()}catch{C(e,o.to)}s.cancel(),r?.()}t.onComplete(e)},s}(e,a,()=>M.delete(e))&&(s.engine="css",M.add(e))),"js"!==s.engine||O(t)||Y(e,t),r.set(e,s),U(e,s,!0)}function G(e){r.has(e)||J(e,function(e,t){return h(g(t=>{const n=e.getAttribute(`data-sa-${t}`);return null===n?void 0:n}),t)}(e,t))}const K={observe(e,n={}){T();const r=h(n,t);y(e).forEach(e=>J(e,r))},unobserve(e){y(e).forEach(e=>{o.delete(e),L(e,!0)})},init(e){const t=e??(i()?document:null);t&&(T(),t.querySelectorAll("[data-sa]").forEach(G))},watch(e){const t=e??(i()?document:null);if(!t||"undefined"==typeof MutationObserver)return s;K.init(t);const n=e=>{e.hasAttribute("data-sa")&&G(e),e.querySelectorAll("[data-sa]").forEach(G)},r=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&&T()});return r.observe(t,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["data-sa"]}),u.add(r),()=>{r.disconnect(),u.delete(r)}},destroy(){u.forEach(e=>e.disconnect()),u.clear(),m.forEach(e=>{const t=E.get(e);void 0!==t&&(clearTimeout(t),E.delete(e))}),m.clear(),r.forEach((e,n)=>{e.animated||"css"===e.engine||A(n,t)}),M.forEach(e=>{x.has(e)&&A(e,t)}),M.clear(),k.forEach(e=>e.forEach(e=>e.disconnect())),k.clear(),r.clear(),l.clear(),z(!1),o=new WeakSet},refresh(){k.forEach(e=>e.forEach(e=>e.disconnect())),k.clear(),l.clear(),z(!1),T(),c()&&r.forEach((e,t)=>{U(t,e,!(e.animated&&e.options.once&&!e.options.repeat))})},animate(e,n={}){const r=h(n,t);y(e).forEach(e=>X(e,r,t,0,m))},getObservedElements:()=>Array.from(r.values()),configure(e){t={...t,...e}}};return K}const R=["animation","duration","delay","easing","threshold","root-margin","offset","once","repeat","stagger","engine","view-range","progress","progress-var","exit","parallax-x","parallax-y","parallax-rotate","parallax-scale","parallax-speed"];let V=null;function z(e="scroll-animate",t){if("undefined"==typeof customElements||"undefined"==typeof HTMLElement)return;const n=customElements.get(e);if(n)return n;const r=()=>t||V||(V=N());class o extends HTMLElement{constructor(){super(...arguments),this.observing=!1}static get observedAttributes(){return R}emit(e,t){this.dispatchEvent(new CustomEvent(`sa:${e}`,{detail:t}))}get options(){return{...g(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"),r().observe(this,this.options),this.observing=!0}disconnectedCallback(){r().unobserve(this),this.observing=!1}attributeChangedCallback(){if(!this.observing)return;const e=r(),t=e.getObservedElements().find(e=>e.element===this);t&&!t.animated&&(e.unobserve(this),e.observe(this,this.options))}}return customElements.define(e,o),o}z(),e.defineScrollAnimate=z});
+!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});
 //# sourceMappingURL=element.umd.js.map