use-scroll-animate 6.0.1 → 6.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (81) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/README.md +39 -1
  3. package/README_ja.md +31 -0
  4. package/README_zh.md +31 -0
  5. package/dist/chunks/{core-mV_TPgG_.js → core-BVQW34aX.js} +10 -202
  6. package/dist/chunks/core-BVQW34aX.js.map +1 -0
  7. package/dist/chunks/{core-qpECfEkb.cjs → core-BYLtO0Po.cjs} +13 -209
  8. package/dist/chunks/core-BYLtO0Po.cjs.map +1 -0
  9. package/dist/chunks/presets-BJ09NeTo.js +226 -0
  10. package/dist/chunks/presets-BJ09NeTo.js.map +1 -0
  11. package/dist/chunks/presets-D2ksQNzJ.cjs +233 -0
  12. package/dist/chunks/presets-D2ksQNzJ.cjs.map +1 -0
  13. package/dist/chunks/{stagger-CLc3j58T.cjs → stagger-CvhYlKrF.cjs} +2 -2
  14. package/dist/chunks/{stagger-CLc3j58T.cjs.map → stagger-CvhYlKrF.cjs.map} +1 -1
  15. package/dist/chunks/{stagger-BFAhKknX.js → stagger-Dh4V-OL0.js} +2 -2
  16. package/dist/chunks/{stagger-BFAhKknX.js.map → stagger-Dh4V-OL0.js.map} +1 -1
  17. package/dist/components/lite.cjs +4 -0
  18. package/dist/components/lite.cjs.map +1 -1
  19. package/dist/components/lite.js +4 -0
  20. package/dist/components/lite.js.map +1 -1
  21. package/dist/components/reveal.cjs +4 -0
  22. package/dist/components/reveal.cjs.map +1 -1
  23. package/dist/components/reveal.js +4 -0
  24. package/dist/components/reveal.js.map +1 -1
  25. package/dist/components.umd.js +2 -2
  26. package/dist/components.umd.js.map +1 -1
  27. package/dist/element.cjs +2 -1
  28. package/dist/element.cjs.map +1 -1
  29. package/dist/element.d.cts +16 -2
  30. package/dist/element.d.ts +16 -2
  31. package/dist/element.js +2 -1
  32. package/dist/element.js.map +1 -1
  33. package/dist/element.umd.js +1 -1
  34. package/dist/element.umd.js.map +1 -1
  35. package/dist/index.cjs +22 -19
  36. package/dist/index.cjs.map +1 -1
  37. package/dist/index.d.cts +34 -9
  38. package/dist/index.d.ts +34 -9
  39. package/dist/index.js +4 -3
  40. package/dist/index.js.map +1 -1
  41. package/dist/index.umd.js +2 -2
  42. package/dist/index.umd.js.map +1 -1
  43. package/dist/presets/extended.cjs +243 -0
  44. package/dist/presets/extended.cjs.map +1 -0
  45. package/dist/presets/extended.d.cts +37 -0
  46. package/dist/presets/extended.d.ts +37 -0
  47. package/dist/presets/extended.js +239 -0
  48. package/dist/presets/extended.js.map +1 -0
  49. package/dist/presets-extended.umd.js +2 -0
  50. package/dist/presets-extended.umd.js.map +1 -0
  51. package/dist/react.cjs +3 -2
  52. package/dist/react.cjs.map +1 -1
  53. package/dist/react.d.cts +16 -2
  54. package/dist/react.d.ts +16 -2
  55. package/dist/react.js +3 -2
  56. package/dist/react.js.map +1 -1
  57. package/dist/solid.cjs +3 -2
  58. package/dist/solid.cjs.map +1 -1
  59. package/dist/solid.d.cts +16 -2
  60. package/dist/solid.d.ts +16 -2
  61. package/dist/solid.js +3 -2
  62. package/dist/solid.js.map +1 -1
  63. package/dist/svelte.cjs +3 -2
  64. package/dist/svelte.cjs.map +1 -1
  65. package/dist/svelte.d.cts +16 -2
  66. package/dist/svelte.d.ts +16 -2
  67. package/dist/svelte.js +3 -2
  68. package/dist/svelte.js.map +1 -1
  69. package/dist/vue.cjs +3 -2
  70. package/dist/vue.cjs.map +1 -1
  71. package/dist/vue.d.cts +16 -2
  72. package/dist/vue.d.ts +16 -2
  73. package/dist/vue.js +3 -2
  74. package/dist/vue.js.map +1 -1
  75. package/docs/API.md +7 -2
  76. package/docs/ROADMAP.md +12 -11
  77. package/docs/components.md +1 -1
  78. package/docs/presets.md +310 -0
  79. package/package.json +15 -2
  80. package/dist/chunks/core-mV_TPgG_.js.map +0 -1
  81. package/dist/chunks/core-qpECfEkb.cjs.map +0 -1
package/dist/index.d.ts CHANGED
@@ -2,8 +2,14 @@
2
2
  * use-scroll-animate - Core Type Definitions
3
3
  * A lightweight, high-performance scroll animation library
4
4
  */
5
- /** Built-in animation presets */
6
- 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';
5
+ /** The 33 core presets (always available in `PRESETS`). */
6
+ 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';
7
+ /**
8
+ * Every built-in preset name: the core set plus the 6.1 extended set, which is
9
+ * available once `use-scroll-animate/presets/extended` is loaded (or after
10
+ * `registerPresets(EXTENDED_PRESETS)`).
11
+ */
12
+ type AnimationPreset = CorePreset | ExtendedPreset;
7
13
  /**
8
14
  * How `onProgress` / `progressVar` progress is measured.
9
15
  * - `'ratio'` (default): the element's visible ratio (IntersectionObserver `intersectionRatio`).
@@ -22,17 +28,27 @@ type ProgressMode = 'ratio' | 'scroll';
22
28
  * since those only mean something for a time-based animation.
23
29
  */
24
30
  type ScrollEngine = 'auto' | 'js' | 'css';
31
+ /** The 6.1 extended presets (`use-scroll-animate/presets/extended`). */
32
+ 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';
25
33
  /** Easing function types */
26
34
  type EasingType = 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring' | 'soft-spring' | 'heavy-bounce' | [number, number, number, number] | ((t: number) => number) | string;
27
35
  /** Keyframe definition for custom animations */
28
36
  interface AnimationKeyframe {
29
37
  [property: string]: string | number;
30
38
  }
39
+ /** One intermediate keyframe of a preset: `offset` is 0 < offset < 1. */
40
+ interface AnimationFrame extends AnimationKeyframe {
41
+ offset: number;
42
+ }
31
43
  /** Custom animation definition */
32
44
  interface CustomAnimation {
33
45
  from: AnimationKeyframe;
34
46
  to: AnimationKeyframe;
47
+ /** Optional intermediate keyframes (overshoot, bounce, …), played between `from` and `to`. */
48
+ frames?: AnimationFrame[];
35
49
  }
50
+ /** The keyframes of a preset (`PRESETS[name]`). */
51
+ type PresetKeyframes = CustomAnimation;
36
52
  /** Per-element animation options */
37
53
  interface AnimateOptions {
38
54
  /** Animation preset name, array of presets, or custom animation object */
@@ -369,11 +385,20 @@ declare function parallax(target: string | Element | NodeList | Element[], optio
369
385
  * Defines keyframes for all built-in animation presets
370
386
  */
371
387
 
372
- type KeyframeMap = {
373
- from: Record<string, string | number>;
374
- to: Record<string, string | number>;
375
- };
376
- declare const PRESETS: Record<AnimationPreset, KeyframeMap>;
388
+ type KeyframeMap = PresetKeyframes;
389
+ /**
390
+ * Every registered preset: the 33 core presets, plus the 6.1 extended set once
391
+ * `use-scroll-animate/presets/extended` is loaded, plus your own.
392
+ */
393
+ declare const PRESETS: Record<CorePreset, KeyframeMap> & Partial<Record<ExtendedPreset, KeyframeMap>>;
394
+ /**
395
+ * Add (or replace) presets by name: `registerPresets({ 'my-pop': { from, to, frames? } })`.
396
+ * They work everywhere a preset name does (`animation`, `exit`, `data-sa-animation`,
397
+ * `<scroll-animate>`, `<usa-reveal effect>`).
398
+ */
399
+ declare function registerPresets(presets: Record<string, PresetKeyframes>): void;
400
+ /** The same keyframes played backwards (exit animations). */
401
+ declare function reversePreset(p: KeyframeMap): KeyframeMap;
377
402
  declare function resolvePreset(animation: AnimationPreset | AnimationPreset[] | CustomAnimation): KeyframeMap;
378
403
  /** Easing to CSS cubic-bezier mapping */
379
404
  declare const EASING_MAP: Record<string, string>;
@@ -396,5 +421,5 @@ declare function resolveEasing(easing: EasingType): string;
396
421
  */
397
422
  declare const ScrollAnimate: ScrollAnimateInstance;
398
423
 
399
- export { EASING_MAP, PRESETS, TIMELINE_PRESETS, createScrollAnimate, ScrollAnimate as default, getScrollProgress, parallax, resolveEasing, resolvePosition, resolvePreset, staggerChildren, supportsNativeScrub, supportsScrollTimeline, timeline };
400
- export type { AnimateOptions, AnimatedElement, AnimationKeyframe, AnimationPreset, CustomAnimation, EasingType, ParallaxHelperOptions, ProgressMode, ScrollAnimateConfig, ScrollAnimateInstance, ScrollEngine, ScrubHandle, ScrubOptions, StaggerOptions, Timeline, TimelineOptions, TimelinePosition, TimelineStepOptions };
424
+ export { EASING_MAP, PRESETS, TIMELINE_PRESETS, createScrollAnimate, ScrollAnimate as default, getScrollProgress, parallax, registerPresets, resolveEasing, resolvePosition, resolvePreset, reversePreset, staggerChildren, supportsNativeScrub, supportsScrollTimeline, timeline };
425
+ export type { AnimateOptions, AnimatedElement, AnimationFrame, AnimationKeyframe, AnimationPreset, CorePreset, CustomAnimation, EasingType, ExtendedPreset, ParallaxHelperOptions, PresetKeyframes, ProgressMode, ScrollAnimateConfig, ScrollAnimateInstance, ScrollEngine, ScrubHandle, ScrubOptions, StaggerOptions, Timeline, TimelineOptions, TimelinePosition, TimelineStepOptions };
package/dist/index.js CHANGED
@@ -1,7 +1,8 @@
1
- import { b as resolveTargets, h as hasDOM, s as supportsObserver, g as getScrollProgress, d as prefersReducedMotion, c as createScrollAnimate } from './chunks/core-mV_TPgG_.js';
2
- export { E as EASING_MAP, P as PRESETS, e as resolveEasing, f as resolvePreset, i as supportsScrollTimeline } from './chunks/core-mV_TPgG_.js';
3
- export { s as staggerChildren } from './chunks/stagger-BFAhKknX.js';
1
+ import { b as resolveTargets, h as hasDOM, s as supportsObserver, g as getScrollProgress, d as prefersReducedMotion, c as createScrollAnimate } from './chunks/core-BVQW34aX.js';
2
+ export { e as supportsScrollTimeline } from './chunks/core-BVQW34aX.js';
3
+ export { s as staggerChildren } from './chunks/stagger-Dh4V-OL0.js';
4
4
  export { T as TIMELINE_PRESETS, r as resolvePosition, s as supportsNativeScrub, t as timeline } from './chunks/core-DN3hHbHh.js';
5
+ export { E as EASING_MAP, P as PRESETS, c as registerPresets, a as resolveEasing, r as resolvePreset, b as reversePreset } from './chunks/presets-BJ09NeTo.js';
5
6
  import './chunks/base-C3Sw9sAO.js';
6
7
  import './components/tokens.js';
7
8
 
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../src/parallax.ts","../src/index.ts"],"sourcesContent":["/**\n * use-scroll-animate - parallax() helper\n *\n * Moves elements at a different speed than the page while they cross the\n * viewport. Built on the same scroll progress as `progressVar` (0 when the\n * element's top enters at the bottom, 1 when its bottom leaves at the top):\n * the progress is written to a CSS custom property (default `--sa-parallax`)\n * and the offset is applied with the individual `translate` property, so it\n * composes with entrance animations and other `transform`s.\n */\n\nimport { getScrollProgress, hasDOM, prefersReducedMotion, resolveTargets, supportsObserver } from './core';\n\nexport interface ParallaxHelperOptions {\n /**\n * Total distance the element shifts while it crosses the viewport, as a\n * fraction of the viewport size (`0.2` = 20vh on the y axis). Positive values\n * lag behind the scroll (background-like), negative values move ahead of it\n * (foreground-like). (default: `0.2`)\n */\n speed?: number;\n /** `'y'` (default) or `'x'` (horizontal drift, in `vw`) */\n axis?: 'x' | 'y';\n /** CSS custom property receiving the progress (default: `'--sa-parallax'`) */\n progressVar?: string;\n /** Scroll container (default: the viewport) */\n root?: Element | null;\n /**\n * Under `prefers-reduced-motion: reduce` no offset is applied (the progress\n * variable is still written). Set to `false` to move anyway. (default: `true`)\n */\n respectReducedMotion?: boolean;\n}\n\nconst PASSIVE: AddEventListenerOptions = { passive: true };\n\n/**\n * Apply a scroll parallax to `target` (selector, Element, NodeList or array).\n * Returns a function that stops it and removes the inline styles it set.\n * SSR-safe (no-op without a DOM / IntersectionObserver).\n *\n * @example\n * const stop = parallax('.hero-bg', { speed: 0.3 });\n * parallax('.badge', { speed: -0.15, axis: 'x' });\n */\nexport function parallax(\n target: string | Element | NodeList | Element[],\n options: ParallaxHelperOptions = {}\n): () => void {\n const els = resolveTargets(target);\n if (!els.length || !hasDOM() || !supportsObserver()) return () => undefined;\n const { speed = 0.2, axis = 'y', root = null, respectReducedMotion = true } = options;\n const name = options.progressVar ? (options.progressVar.startsWith('--') ? options.progressVar : `--${options.progressVar}`) : '--sa-parallax';\n const unit = axis === 'x' ? 'vw' : 'vh';\n const visible = new Set<Element>();\n let frame = 0;\n let listening = false;\n const scroller: EventTarget = root || window;\n\n const apply = (el: Element) => {\n const style = (el as HTMLElement).style;\n if (!style) return;\n const p = getScrollProgress(el, root);\n style.setProperty(name, String(+p.toFixed(4)));\n if (respectReducedMotion && prefersReducedMotion()) {\n style.removeProperty('translate');\n return;\n }\n const offset = `${+((p - 0.5) * speed * 100).toFixed(3)}${unit}`;\n style.setProperty('translate', axis === 'x' ? `${offset} 0px` : `0px ${offset}`);\n };\n\n const update = () => {\n frame = 0;\n visible.forEach(apply);\n };\n const schedule = () => {\n if (!frame) frame = requestAnimationFrame(update);\n };\n const listen = (on: boolean) => {\n if (on === listening) return;\n listening = on;\n const method = on ? 'addEventListener' : 'removeEventListener';\n scroller[method]('scroll', schedule, PASSIVE);\n window[method]('resize', schedule, PASSIVE);\n if (!on && frame) {\n cancelAnimationFrame(frame);\n frame = 0;\n }\n };\n\n const io = new IntersectionObserver(\n (entries) => {\n entries.forEach((entry) => {\n if (entry.isIntersecting) visible.add(entry.target);\n else visible.delete(entry.target);\n apply(entry.target); // report the edges even on fast scrolls\n });\n listen(visible.size > 0);\n },\n { threshold: 0, root }\n );\n els.forEach((el) => {\n apply(el); // no jump before the first observer callback\n io.observe(el);\n });\n\n return () => {\n io.disconnect();\n listen(false);\n visible.clear();\n els.forEach((el) => {\n const style = (el as HTMLElement).style;\n if (!style) return;\n style.removeProperty('translate');\n style.removeProperty(name);\n });\n };\n}\n","/**\n * use-scroll-animate\n *\n * A lightweight, dependency-free scroll animation library for modern web\n * applications. Built with TypeScript, powered by IntersectionObserver and\n * the Web Animations API (or the native scroll-driven timeline). Safe to\n * import during SSR. Framework integrations live in the subpath entries:\n * `use-scroll-animate/react`, `/vue`, `/svelte`, `/solid`, `/element`.\n *\n * @license MIT\n * @see https://github.com/HarrisonCN/use-scroll-animate\n */\n\nexport { createScrollAnimate, getScrollProgress, supportsScrollTimeline } from './core';\nexport { staggerChildren } from './stagger';\nexport { timeline, resolvePosition, TIMELINE_PRESETS, supportsNativeScrub } from './components/timeline/core';\nexport { parallax } from './parallax';\nexport { PRESETS, resolvePreset, resolveEasing, EASING_MAP } from './presets';\nexport type {\n AnimationPreset,\n EasingType,\n AnimationKeyframe,\n CustomAnimation,\n ProgressMode,\n ScrollEngine,\n AnimateOptions,\n ScrollAnimateConfig,\n AnimatedElement,\n ScrollAnimateInstance,\n} from './types';\nexport type { StaggerOptions } from './stagger';\nexport type { ParallaxHelperOptions } from './parallax';\nexport type { Timeline, TimelineOptions, TimelineStepOptions, TimelinePosition, ScrubOptions, ScrubHandle } from './components/timeline/core';\n\n// Default export: a ready-to-use singleton instance\nimport { createScrollAnimate } from './core';\n\n/**\n * Default singleton instance of ScrollAnimate.\n * Ready to use out of the box with sensible defaults.\n *\n * @example\n * ```js\n * import ScrollAnimate from 'use-scroll-animate';\n *\n * // Auto-initialize all elements with data-sa attribute\n * ScrollAnimate.init();\n *\n * // Or manually observe elements\n * ScrollAnimate.observe('.my-element', { animation: 'fade-in-up' });\n * ```\n */\nconst ScrollAnimate = /* @__PURE__ */ createScrollAnimate();\nexport default ScrollAnimate;\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sources":["../src/parallax.ts","../src/index.ts"],"sourcesContent":["/**\n * use-scroll-animate - parallax() helper\n *\n * Moves elements at a different speed than the page while they cross the\n * viewport. Built on the same scroll progress as `progressVar` (0 when the\n * element's top enters at the bottom, 1 when its bottom leaves at the top):\n * the progress is written to a CSS custom property (default `--sa-parallax`)\n * and the offset is applied with the individual `translate` property, so it\n * composes with entrance animations and other `transform`s.\n */\n\nimport { getScrollProgress, hasDOM, prefersReducedMotion, resolveTargets, supportsObserver } from './core';\n\nexport interface ParallaxHelperOptions {\n /**\n * Total distance the element shifts while it crosses the viewport, as a\n * fraction of the viewport size (`0.2` = 20vh on the y axis). Positive values\n * lag behind the scroll (background-like), negative values move ahead of it\n * (foreground-like). (default: `0.2`)\n */\n speed?: number;\n /** `'y'` (default) or `'x'` (horizontal drift, in `vw`) */\n axis?: 'x' | 'y';\n /** CSS custom property receiving the progress (default: `'--sa-parallax'`) */\n progressVar?: string;\n /** Scroll container (default: the viewport) */\n root?: Element | null;\n /**\n * Under `prefers-reduced-motion: reduce` no offset is applied (the progress\n * variable is still written). Set to `false` to move anyway. (default: `true`)\n */\n respectReducedMotion?: boolean;\n}\n\nconst PASSIVE: AddEventListenerOptions = { passive: true };\n\n/**\n * Apply a scroll parallax to `target` (selector, Element, NodeList or array).\n * Returns a function that stops it and removes the inline styles it set.\n * SSR-safe (no-op without a DOM / IntersectionObserver).\n *\n * @example\n * const stop = parallax('.hero-bg', { speed: 0.3 });\n * parallax('.badge', { speed: -0.15, axis: 'x' });\n */\nexport function parallax(\n target: string | Element | NodeList | Element[],\n options: ParallaxHelperOptions = {}\n): () => void {\n const els = resolveTargets(target);\n if (!els.length || !hasDOM() || !supportsObserver()) return () => undefined;\n const { speed = 0.2, axis = 'y', root = null, respectReducedMotion = true } = options;\n const name = options.progressVar ? (options.progressVar.startsWith('--') ? options.progressVar : `--${options.progressVar}`) : '--sa-parallax';\n const unit = axis === 'x' ? 'vw' : 'vh';\n const visible = new Set<Element>();\n let frame = 0;\n let listening = false;\n const scroller: EventTarget = root || window;\n\n const apply = (el: Element) => {\n const style = (el as HTMLElement).style;\n if (!style) return;\n const p = getScrollProgress(el, root);\n style.setProperty(name, String(+p.toFixed(4)));\n if (respectReducedMotion && prefersReducedMotion()) {\n style.removeProperty('translate');\n return;\n }\n const offset = `${+((p - 0.5) * speed * 100).toFixed(3)}${unit}`;\n style.setProperty('translate', axis === 'x' ? `${offset} 0px` : `0px ${offset}`);\n };\n\n const update = () => {\n frame = 0;\n visible.forEach(apply);\n };\n const schedule = () => {\n if (!frame) frame = requestAnimationFrame(update);\n };\n const listen = (on: boolean) => {\n if (on === listening) return;\n listening = on;\n const method = on ? 'addEventListener' : 'removeEventListener';\n scroller[method]('scroll', schedule, PASSIVE);\n window[method]('resize', schedule, PASSIVE);\n if (!on && frame) {\n cancelAnimationFrame(frame);\n frame = 0;\n }\n };\n\n const io = new IntersectionObserver(\n (entries) => {\n entries.forEach((entry) => {\n if (entry.isIntersecting) visible.add(entry.target);\n else visible.delete(entry.target);\n apply(entry.target); // report the edges even on fast scrolls\n });\n listen(visible.size > 0);\n },\n { threshold: 0, root }\n );\n els.forEach((el) => {\n apply(el); // no jump before the first observer callback\n io.observe(el);\n });\n\n return () => {\n io.disconnect();\n listen(false);\n visible.clear();\n els.forEach((el) => {\n const style = (el as HTMLElement).style;\n if (!style) return;\n style.removeProperty('translate');\n style.removeProperty(name);\n });\n };\n}\n","/**\n * use-scroll-animate\n *\n * A lightweight, dependency-free scroll animation library for modern web\n * applications. Built with TypeScript, powered by IntersectionObserver and\n * the Web Animations API (or the native scroll-driven timeline). Safe to\n * import during SSR. Framework integrations live in the subpath entries:\n * `use-scroll-animate/react`, `/vue`, `/svelte`, `/solid`, `/element`.\n *\n * @license MIT\n * @see https://github.com/HarrisonCN/use-scroll-animate\n */\n\nexport { createScrollAnimate, getScrollProgress, supportsScrollTimeline } from './core';\nexport { staggerChildren } from './stagger';\nexport { timeline, resolvePosition, TIMELINE_PRESETS, supportsNativeScrub } from './components/timeline/core';\nexport { parallax } from './parallax';\nexport { PRESETS, registerPresets, reversePreset, resolvePreset, resolveEasing, EASING_MAP } from './presets';\nexport type {\n AnimationPreset,\n CorePreset,\n ExtendedPreset,\n PresetKeyframes,\n AnimationFrame,\n EasingType,\n AnimationKeyframe,\n CustomAnimation,\n ProgressMode,\n ScrollEngine,\n AnimateOptions,\n ScrollAnimateConfig,\n AnimatedElement,\n ScrollAnimateInstance,\n} from './types';\nexport type { StaggerOptions } from './stagger';\nexport type { ParallaxHelperOptions } from './parallax';\nexport type { Timeline, TimelineOptions, TimelineStepOptions, TimelinePosition, ScrubOptions, ScrubHandle } from './components/timeline/core';\n\n// Default export: a ready-to-use singleton instance\nimport { createScrollAnimate } from './core';\n\n/**\n * Default singleton instance of ScrollAnimate.\n * Ready to use out of the box with sensible defaults.\n *\n * @example\n * ```js\n * import ScrollAnimate from 'use-scroll-animate';\n *\n * // Auto-initialize all elements with data-sa attribute\n * ScrollAnimate.init();\n *\n * // Or manually observe elements\n * ScrollAnimate.observe('.my-element', { animation: 'fade-in-up' });\n * ```\n */\nconst ScrollAnimate = /* @__PURE__ */ createScrollAnimate();\nexport default ScrollAnimate;\n"],"names":[],"mappings":"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"}
package/dist/index.umd.js CHANGED
@@ -1,4 +1,4 @@
1
- !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).ScrollAnimate={})}(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 u(){return!!i()&&(void 0===l&&(l="function"==typeof window.matchMedia?window.matchMedia("(prefers-reduced-motion: reduce)"):null),!!l&&l.matches)}function d(){return void 0===f&&(f=i()&&"undefined"!=typeof CSS&&"function"==typeof CSS.supports&&CSS.supports("animation-timeline: view()")&&"function"==typeof globalThis.ViewTimeline),f}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,t){return y(function(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 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):m(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=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}(t=>{const n=e.getAttribute(`data-sa-${t}`);return null===n?void 0:n}),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 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,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?g(e.progressVar):"",engine:n,viewRange:e.viewRange??p,exit:r}}function b(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 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 w=new WeakMap,x=new WeakMap,E=new WeakMap;function S(e){const t=x.get(e);t&&(x.delete(e),t.cancel());const n=w.get(e);n&&(w.delete(e),n.onfinish=null,n.cancel());const r=E.get(e);void 0!==r&&(clearTimeout(r),E.delete(e))}function M(e,t){const n=e.style;n&&Object.keys(t).forEach(e=>{n[e]=String(t[e])})}const C=/(-?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?)([a-z%]*)/gi;let A,O;function P(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===A&&(A="undefined"!=typeof CSS&&"function"==typeof CSS.supports&&CSS.supports("animation-timing-function","linear(0, 1)")),A)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(C,(e,t,n)=>(a.push([parseFloat(t),n]),"#"));if(i!==o.replace(C,(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 $(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 k(e){return!!e.disabled||u()}function T(e,t,r,o=0,a){const{duration:s,delay:i,stagger:c,onStart:l,onComplete:f}=t,u=Math.max(0,i+o*c);if(S(e),k(r))return $(e,r),l(e),void f(e);if(r.useClassNames)return u>0&&(e.style.animationDelay=`${u}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+u));const d=n(t.animation);if(!("opacity"in d.to)){const t=e.style;t&&"0"===t.opacity&&(t.opacity="")}if("function"!=typeof e.animate)return M(e,d.to),l(e),void f(e);const m=P(d,t.easing),p={duration:s,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"})}w.set(e,g),l(e),g.onfinish=()=>{if(w.get(e)===g){w.delete(e);try{g.commitStyles()}catch{M(e,d.to)}g.cancel()}f(e)}}function X(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 j(e,t={}){const n={...a,...t};k(n)||X(e,n)}function z(){if(!O){O=[];for(let e=0;e<=100;e++)O.push(e/100)}return O}const N={passive:!0};function L(e={}){let t={...a,...e};const r=new Map;let o=new WeakSet;const l=new Set;let f=0,u=null;const m=new Set,p=new Set,g=new Set,C=new Map;function A(e,t,n){let r=C.get(e);r||C.set(e,r=new Map);let o=r.get(t);return o||r.set(t,o=n()),o}function O(e,n){const o=r.get(e);o&&(o.observer.unobserve(e),o.progressObserver?.unobserve(e),r.delete(e),V(e),"css"!==o.engine?n&&!o.animated&&$(e,t):n?(g.delete(e),$(e,t)):!1===e.isConnected&&g.delete(e))}function j(){r.forEach((e,t)=>{!1===t.isConnected&&O(t,!1)})}function L(e,t,n){const r=t.options;if(r.onProgress(e,n),r.progressVar){const t=e.style;t&&t.setProperty(r.progressVar,String(+n.toFixed(4)))}}function F(){f=0,l.forEach(e=>{const n=r.get(e);n&&L(e,n,v(e,t.root))})}const Y=()=>f||(f=requestAnimationFrame(F));function R(e){if(e===!!u)return;const n=e?"addEventListener":"removeEventListener",r=u||t.root||window;r[n]("scroll",Y,N),window[n]("resize",Y,N),u=e?r:null,!e&&f&&(cancelAnimationFrame(f),f=0)}function V(e){l.delete(e)&&!l.size&&R(!1)}function I(e){e.forEach(e=>{const n=e.target,o=r.get(n);o&&(e.isIntersecting?(l.add(n),R(!0)):V(n),L(n,o,v(n,t.root)))})}function W(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)}T(s,c,t,e,p),i.animated=!0,c.once&&!c.repeat&&(i.observer.unobserve(s),t.autoUnregister&&!i.progressObserver&&(o.add(s),O(s,!1)))}else c.onLeave(s),c.repeat&&i.animated&&(k(t)||(c.exit?function(e,t,r){if(r.useClassNames||"function"!=typeof e.animate)return void X(e,r);S(e);const o=n(!0===t.exit?t.animation:t.exit),a=P({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"})}w.set(e,i)}(s,c,t):X(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),O(s,!1)))):(c.onLeave(s),c.repeat&&(i.animated=!1));else O(s,!1)})}function q(e){e.forEach(e=>{const t=r.get(e.target);t&&L(e.target,t,e.intersectionRatio)})}function D(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 A(o,`m|${n}|${String(r)}`,()=>new IntersectionObserver(W,{threshold:r,rootMargin:n,root:o}))}function H(e,n,r){var o;n.observer=D(n.options),r&&n.observer.observe(e),n.progressObserver=(o=n.options).onProgress!==s||o.progressVar?function(e){const n=t.root;return"scroll"===e.progressMode?A(n,`s|${e.rootMargin}`,()=>new IntersectionObserver(I,{threshold:0,rootMargin:e.rootMargin,root:n})):A(n,`p|${e.rootMargin}`,()=>new IntersectionObserver(q,{threshold:z(),rootMargin:e.rootMargin,root:n}))}(n.options):void 0,n.progressObserver?.observe(e)}function U(e,a){if(r.has(e)||o.has(e))return;if(!c())return void $(e,t);const s={element:e,options:a,animated:!1,engine:"js"};(function(e){return"js"!==e.engine&&!t.useClassNames&&!k(t)&&d()})(a)&&(S(e),function(e,t,r){if("function"!=typeof e.animate)return null;const o=n(t.animation),a=P(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(w.set(e,s),t.exit){const r=n(!0===t.exit?t.animation:t.exit),o=P({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%"};x.set(e,e.animate(o.keyframes,n))}catch{}}const i=t.repeat||!t.once;return s.onfinish=()=>{if(!i&&w.get(e)===s){w.delete(e);try{s.commitStyles()}catch{M(e,o.to)}s.cancel(),r?.()}t.onComplete(e)},s}(e,a,()=>g.delete(e))&&(s.engine="css",g.add(e))),"js"!==s.engine||k(t)||X(e,t),r.set(e,s),H(e,s,!0)}function _(e){r.has(e)||U(e,h(e,t))}const B={observe(e,n={}){j();const r=y(n,t);b(e).forEach(e=>U(e,r))},unobserve(e){b(e).forEach(e=>{o.delete(e),O(e,!0)})},init(e){const t=e??(i()?document:null);t&&(j(),t.querySelectorAll("[data-sa]").forEach(_))},watch(e){const t=e??(i()?document:null);if(!t||"undefined"==typeof MutationObserver)return s;B.init(t);const n=e=>{e.hasAttribute("data-sa")&&_(e),e.querySelectorAll("[data-sa]").forEach(_)},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&&j()});return r.observe(t,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["data-sa"]}),m.add(r),()=>{r.disconnect(),m.delete(r)}},destroy(){m.forEach(e=>e.disconnect()),m.clear(),p.forEach(e=>{const t=E.get(e);void 0!==t&&(clearTimeout(t),E.delete(e))}),p.clear(),r.forEach((e,n)=>{e.animated||"css"===e.engine||$(n,t)}),g.forEach(e=>{w.has(e)&&$(e,t)}),g.clear(),C.forEach(e=>e.forEach(e=>e.disconnect())),C.clear(),r.clear(),l.clear(),R(!1),o=new WeakSet},refresh(){C.forEach(e=>e.forEach(e=>e.disconnect())),C.clear(),l.clear(),R(!1),j(),c()&&r.forEach((e,t)=>{H(t,e,!(e.animated&&e.options.once&&!e.options.repeat))})},animate(e,n={}){const r=y(n,t);b(e).forEach(e=>T(e,r,t,0,p))},getObservedElements:()=>Array.from(r.values()),configure(e){t={...t,...e}}};return B}let F=null;const Y={low:.6,normal:1,high:1.25},R="normal";function V(){return"function"==typeof matchMedia&&!!matchMedia("(prefers-reduced-motion: reduce)").matches}function I(e,t){if(t)for(const[n,r]of Object.entries(t))"offset"!==n&&"easing"!==n&&"composite"!==n&&null!=r&&(e.style[n]=String(r))}const W=new Map;let q=1,D=0,H=null;const U={frames:0,callbacks:0,peak:0,last:0},_=new Set;function B(e){D=0;const t=U.last&&e>U.last?e-U.last:16.7;U.last=e,U.frames++;const n=Array.from(W.values());W.clear(),U.callbacks+=n.length,U.peak=Math.max(U.peak,n.length);let r=null;for(const t of n)try{t(e)}catch(e){r??(r=e)}if(_.forEach(n=>n(e,t)),_.size&&G(),r)throw r}function G(){const e="function"==typeof requestAnimationFrame?requestAnimationFrame:null;D&&H===e||(H=e,D=e?e(B):setTimeout(()=>B(Z()),16))}const J=e=>{const t=q++;return W.set(t,e),G(),t},Z=()=>"undefined"!=typeof performance?performance.now():Date.now(),K=e=>{W.delete(e)},Q=(e,t,n)=>Math.min(n,Math.max(t,e));let ee={duration:{...(te={duration:{instant:0,fast:150,normal:300,slow:600,slower:900,slowest:1400},easing:{linear:"linear",standard:"cubic-bezier(0.2, 0, 0, 1)",emphasized:"cubic-bezier(0.22, 1, 0.36, 1)",decelerate:"cubic-bezier(0, 0, 0, 1)",accelerate:"cubic-bezier(0.3, 0, 1, 1)",spring:"cubic-bezier(0.34, 1.56, 0.64, 1)",bounce:"cubic-bezier(0.68, -0.55, 0.265, 1.55)"},spring:{gentle:{stiffness:120,damping:14,mass:1},snappy:{stiffness:300,damping:30,mass:1},bouncy:{stiffness:260,damping:12,mass:1},wobbly:{stiffness:180,damping:8,mass:1},stiff:{stiffness:500,damping:40,mass:1}}}).duration},easing:{...te.easing},spring:Object.fromEntries(Object.entries(te.spring).map(([e,t])=>[e,{...t}]))};var te;function ne(e){if("number"==typeof e&&isFinite(e))return e;if("object"==typeof e&&e&&"value"in e&&"unit"in e)return ne(`${e.value}${e.unit}`);const t=/^\s*(-?\d*\.?\d+)\s*(ms|s)?\s*$/.exec(String(e??""));return t?"s"===t[2]?1e3*Number(t[1]):Number(t[1]):void 0}function re(e,t){return"number"==typeof e?e:"string"==typeof e?ee.duration[e]??ne(e)??t:t}function oe(e,t){return e?ee.easing[e]??e:t}function ae(e="view"){const t=globalThis;return"function"==typeof t["scroll"===e?"ScrollTimeline":"ViewTimeline"]&&"function"==typeof t.Element?.prototype?.animate}const se=(e,t)=>Object.assign(e,{native:t}),ie={fade:[{opacity:0},{opacity:1}],"fade-up":[{opacity:0,transform:"translateY(24px)"},{opacity:1,transform:"none"}],"fade-down":[{opacity:0,transform:"translateY(-24px)"},{opacity:1,transform:"none"}],"fade-left":[{opacity:0,transform:"translateX(24px)"},{opacity:1,transform:"none"}],"fade-right":[{opacity:0,transform:"translateX(-24px)"},{opacity:1,transform:"none"}],scale:[{opacity:0,transform:"scale(0.85)"},{opacity:1,transform:"none"}],blur:[{opacity:0,filter:"blur(12px)"},{opacity:1,filter:"blur(0)"}],rotate:[{opacity:0,transform:"rotate(-12deg) scale(0.9)"},{opacity:1,transform:"none"}],"clip-up":[{clipPath:"inset(100% 0 0 0)"},{clipPath:"inset(0 0 0 0)"}],"clip-right":[{clipPath:"inset(0 100% 0 0)"},{clipPath:"inset(0 0 0 0)"}]};function ce(e,t,n,r={}){if(void 0===e||""===e||">"===e)return t;if("number"==typeof e)return Math.max(0,e);const o=String(e).trim();if(/^-?\d+(\.\d+)?$/.test(o))return Math.max(0,Number(o));const a=/^(<|>|[A-Za-z_][\w-]*)?\s*(?:([+-])=\s*(\d+(?:\.\d+)?))?$/.exec(o);if(!a)return t;const s="<"===a[1]?n:">"!==a[1]&&a[1]?r[a[1]]??t:t,i=a[2]?("-"===a[2]?-1:1)*Number(a[3]):0;return Math.max(0,s+i)}const le={passive:!0};
1
+ !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).ScrollAnimate={})}(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 r=e=>t[e.trim()];function o(e){if("string"==typeof e)return r(e)??t["fade-in-up"];if(Array.isArray(e)){const t={from:{},to:{}};return e.forEach(e=>{const n=r(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 a={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 s(e){return"string"==typeof e?a[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(){return!!l()&&(void 0===u&&(u="function"==typeof window.matchMedia?window.matchMedia("(prefers-reduced-motion: reduce)"):null),!!u&&u.matches)}function p(){return void 0===d&&(d=l()&&"undefined"!=typeof CSS&&"function"==typeof CSS.supports&&CSS.supports("animation-timeline: view()")&&"function"==typeof globalThis.ViewTimeline),d}function g(e){if(void 0===e||""===e.trim())return;const t=parseFloat(e);return Number.isFinite(t)?t:void 0}const h=["entry 0%","entry 100%"];function y(e){const t=e.trim();return t?t.startsWith("--")?t:`--${t}`:"--sa-progress"}function b(e,t){return v(function(e){const t={},n=e("animation");n&&(t.animation=n.includes(",")?n.split(",").map(e=>e.trim()):n.trim()),t.duration=g(e("duration")),t.delay=g(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):g(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=g(e("offset")),t.stagger=g(e("stagger"));const c=e("progress-var");void 0!==c&&(t.progressVar=y(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}(t=>{const n=e.getAttribute(`data-sa-${t}`);return null===n?void 0:n}),t)}function v(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,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?y(e.progressVar):"",engine:n,viewRange:e.viewRange??h,exit:r}}function w(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 x(e,t){if(!l())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 E=new WeakMap,S=new WeakMap,M=new WeakMap;function C(e){const t=S.get(e);t&&(S.delete(e),t.cancel());const n=E.get(e);n&&(E.delete(e),n.onfinish=null,n.cancel());const r=M.get(e);void 0!==r&&(clearTimeout(r),M.delete(e))}function O(e,t){const n=e.style;n&&Object.keys(t).forEach(e=>{n[e]=String(t[e])})}const P=/(-?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?)([a-z%]*)/gi;let A,$;function k(){return void 0===A&&(A="undefined"!=typeof CSS&&"function"==typeof CSS.supports&&CSS.supports("animation-timing-function","linear(0, 1)")),A}function T(e,t){const n=[e.from,...e.frames||[],e.to];if("function"!=typeof t)return{keyframes:n,easing:s(t)};const r=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(k()||e.frames)return{keyframes:n,easing:k()?`linear(${r.join(", ")})`:"ease"};const o=Object.keys(e.from).filter(t=>t in e.to);return{keyframes:r.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 r=String(e),o=String(t),a=[],s=[],i=r.replace(P,(e,t,n)=>(a.push([parseFloat(t),n]),"#"));if(i!==o.replace(P,(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)}),r}),easing:"linear"}}function j(e,t){if(C(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||m()}function z(e,t,n,r=0,a){const{duration:s,delay:i,stagger:c,onStart:l,onComplete:f}=t,u=Math.max(0,i+r*c);if(C(e),X(n))return j(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),a?.add(e),void M.set(e,setTimeout(()=>{M.delete(e),a?.delete(e),f(e)},s+u));const d=o(t.animation);if(!("opacity"in d.to)){const t=e.style;t&&"0"===t.opacity&&(t.opacity="")}if("function"!=typeof e.animate)return O(e,d.to),l(e),void f(e);const m=T(d,t.easing),p={duration:s,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"})}E.set(e,g),l(e),g.onfinish=()=>{if(E.get(e)===g){E.delete(e);try{g.commitStyles()}catch{O(e,d.to)}g.cancel()}f(e)}}function N(e,t){if(C(e),t.useClassNames)e.classList.add(t.hiddenClass),e.classList.remove(t.visibleClass);else{const t=e.style;t&&(t.opacity="0")}}function L(e,t={}){const n={...i,...t};X(n)||N(e,n)}function F(){if(!$){$=[];for(let e=0;e<=100;e++)$.push(e/100)}return $}const Y={passive:!0};function R(e={}){let t={...i,...e};const r=new Map;let a=new WeakSet;const s=new Set;let u=0,d=null;const m=new Set,g=new Set,h=new Set,y=new Map;function P(e,t,n){let r=y.get(e);r||y.set(e,r=new Map);let o=r.get(t);return o||r.set(t,o=n()),o}function A(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&&j(e,t):n?(h.delete(e),j(e,t)):!1===e.isConnected&&h.delete(e))}function $(){r.forEach((e,t)=>{!1===t.isConnected&&A(t,!1)})}function k(e,t,n){const r=t.options;if(r.onProgress(e,n),r.progressVar){const t=e.style;t&&t.setProperty(r.progressVar,String(+n.toFixed(4)))}}function L(){u=0,s.forEach(e=>{const n=r.get(e);n&&k(e,n,x(e,t.root))})}const R=()=>u||(u=requestAnimationFrame(L));function V(e){if(e===!!d)return;const n=e?"addEventListener":"removeEventListener",r=d||t.root||window;r[n]("scroll",R,Y),window[n]("resize",R,Y),d=e?r:null,!e&&u&&(cancelAnimationFrame(u),u=0)}function I(e){s.delete(e)&&!s.size&&V(!1)}function W(e){e.forEach(e=>{const n=e.target,o=r.get(n);o&&(e.isIntersecting?(s.add(n),V(!0)):I(n),k(n,o,x(n,t.root)))})}function q(e){const s=new Map;e.forEach(e=>{const i=e.target,c=r.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=s.get(t)??0,s.set(t,e+1)}z(i,l,t,e,g),c.animated=!0,l.once&&!l.repeat&&(c.observer.unobserve(i),t.autoUnregister&&!c.progressObserver&&(a.add(i),A(i,!1)))}else l.onLeave(i),l.repeat&&c.animated&&(X(t)||(l.exit?function(e,t,r){if(r.useClassNames||"function"!=typeof e.animate)return void N(e,r);C(e);const a=T(n(o(!0===t.exit?t.animation:t.exit)),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"})}E.set(e,i)}(i,l,t):N(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&&(a.add(i),A(i,!1)))):(l.onLeave(i),l.repeat&&(c.animated=!1));else A(i,!1)})}function D(e){e.forEach(e=>{const t=r.get(e.target);t&&k(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 P(o,`m|${n}|${String(r)}`,()=>new IntersectionObserver(q,{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=(o=n.options).onProgress!==c||o.progressVar?function(e){const n=t.root;return"scroll"===e.progressMode?P(n,`s|${e.rootMargin}`,()=>new IntersectionObserver(W,{threshold:0,rootMargin:e.rootMargin,root:n})):P(n,`p|${e.rootMargin}`,()=>new IntersectionObserver(D,{threshold:F(),rootMargin:e.rootMargin,root:n}))}(n.options):void 0,n.progressObserver?.observe(e)}function _(e,s){if(r.has(e)||a.has(e))return;if(!f())return void j(e,t);const i={element:e,options:s,animated:!1,engine:"js"};(function(e){return"js"!==e.engine&&!t.useClassNames&&!X(t)&&p()})(s)&&(C(e),function(e,t,r){if("function"!=typeof e.animate)return null;const a=o(t.animation),s=T(a,t.easing);let i;try{const n=new globalThis.ViewTimeline({subject:e,axis:"block"}),r={fill:"both",easing:s.easing,timeline:n,rangeStart:t.viewRange[0],rangeEnd:t.viewRange[1]};try{i=e.animate(s.keyframes,r)}catch{i=e.animate(s.keyframes,{...r,easing:"linear"})}}catch{return null}if(E.set(e,i),t.exit){const r=T(n(o(!0===t.exit?t.animation:t.exit)),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%"};S.set(e,e.animate(r.keyframes,n))}catch{}}const c=t.repeat||!t.once;return i.onfinish=()=>{if(!c&&E.get(e)===i){E.delete(e);try{i.commitStyles()}catch{O(e,a.to)}i.cancel(),r?.()}t.onComplete(e)},i}(e,s,()=>h.delete(e))&&(i.engine="css",h.add(e))),"js"!==i.engine||X(t)||N(e,t),r.set(e,i),U(e,i,!0)}function B(e){r.has(e)||_(e,b(e,t))}const G={observe(e,n={}){$();const r=v(n,t);w(e).forEach(e=>_(e,r))},unobserve(e){w(e).forEach(e=>{a.delete(e),A(e,!0)})},init(e){const t=e??(l()?document:null);t&&($(),t.querySelectorAll("[data-sa]").forEach(B))},watch(e){const t=e??(l()?document:null);if(!t||"undefined"==typeof MutationObserver)return c;G.init(t);const n=e=>{e.hasAttribute("data-sa")&&B(e),e.querySelectorAll("[data-sa]").forEach(B)},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&&$()});return r.observe(t,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["data-sa"]}),m.add(r),()=>{r.disconnect(),m.delete(r)}},destroy(){m.forEach(e=>e.disconnect()),m.clear(),g.forEach(e=>{const t=M.get(e);void 0!==t&&(clearTimeout(t),M.delete(e))}),g.clear(),r.forEach((e,n)=>{e.animated||"css"===e.engine||j(n,t)}),h.forEach(e=>{E.has(e)&&j(e,t)}),h.clear(),y.forEach(e=>e.forEach(e=>e.disconnect())),y.clear(),r.clear(),s.clear(),V(!1),a=new WeakSet},refresh(){y.forEach(e=>e.forEach(e=>e.disconnect())),y.clear(),s.clear(),V(!1),$(),f()&&r.forEach((e,t)=>{U(t,e,!(e.animated&&e.options.once&&!e.options.repeat))})},animate(e,n={}){const r=v(n,t);w(e).forEach(e=>z(e,r,t,0,g))},getObservedElements:()=>Array.from(r.values()),configure(e){t={...t,...e}}};return G}let V=null;const I={low:.6,normal:1,high:1.25},W="normal";function q(){return"function"==typeof matchMedia&&!!matchMedia("(prefers-reduced-motion: reduce)").matches}function D(e,t){if(t)for(const[n,r]of Object.entries(t))"offset"!==n&&"easing"!==n&&"composite"!==n&&null!=r&&(e.style[n]=String(r))}const H=new Map;let U=1,_=0,B=null;const G={frames:0,callbacks:0,peak:0,last:0},J=new Set;function Z(e){_=0;const t=G.last&&e>G.last?e-G.last:16.7;G.last=e,G.frames++;const n=Array.from(H.values());H.clear(),G.callbacks+=n.length,G.peak=Math.max(G.peak,n.length);let r=null;for(const t of n)try{t(e)}catch(e){r??(r=e)}if(J.forEach(n=>n(e,t)),J.size&&K(),r)throw r}function K(){const e="function"==typeof requestAnimationFrame?requestAnimationFrame:null;_&&B===e||(B=e,_=e?e(Z):setTimeout(()=>Z(ee()),16))}const Q=e=>{const t=U++;return H.set(t,e),K(),t},ee=()=>"undefined"!=typeof performance?performance.now():Date.now(),te=e=>{H.delete(e)},ne=(e,t,n)=>Math.min(n,Math.max(t,e));let re={duration:{...(oe={duration:{instant:0,fast:150,normal:300,slow:600,slower:900,slowest:1400},easing:{linear:"linear",standard:"cubic-bezier(0.2, 0, 0, 1)",emphasized:"cubic-bezier(0.22, 1, 0.36, 1)",decelerate:"cubic-bezier(0, 0, 0, 1)",accelerate:"cubic-bezier(0.3, 0, 1, 1)",spring:"cubic-bezier(0.34, 1.56, 0.64, 1)",bounce:"cubic-bezier(0.68, -0.55, 0.265, 1.55)"},spring:{gentle:{stiffness:120,damping:14,mass:1},snappy:{stiffness:300,damping:30,mass:1},bouncy:{stiffness:260,damping:12,mass:1},wobbly:{stiffness:180,damping:8,mass:1},stiff:{stiffness:500,damping:40,mass:1}}}).duration},easing:{...oe.easing},spring:Object.fromEntries(Object.entries(oe.spring).map(([e,t])=>[e,{...t}]))};var oe;function ae(e){if("number"==typeof e&&isFinite(e))return e;if("object"==typeof e&&e&&"value"in e&&"unit"in e)return ae(`${e.value}${e.unit}`);const t=/^\s*(-?\d*\.?\d+)\s*(ms|s)?\s*$/.exec(String(e??""));return t?"s"===t[2]?1e3*Number(t[1]):Number(t[1]):void 0}function se(e,t){return"number"==typeof e?e:"string"==typeof e?re.duration[e]??ae(e)??t:t}function ie(e,t){return e?re.easing[e]??e:t}function ce(e="view"){const t=globalThis;return"function"==typeof t["scroll"===e?"ScrollTimeline":"ViewTimeline"]&&"function"==typeof t.Element?.prototype?.animate}const le=(e,t)=>Object.assign(e,{native:t}),fe={fade:[{opacity:0},{opacity:1}],"fade-up":[{opacity:0,transform:"translateY(24px)"},{opacity:1,transform:"none"}],"fade-down":[{opacity:0,transform:"translateY(-24px)"},{opacity:1,transform:"none"}],"fade-left":[{opacity:0,transform:"translateX(24px)"},{opacity:1,transform:"none"}],"fade-right":[{opacity:0,transform:"translateX(-24px)"},{opacity:1,transform:"none"}],scale:[{opacity:0,transform:"scale(0.85)"},{opacity:1,transform:"none"}],blur:[{opacity:0,filter:"blur(12px)"},{opacity:1,filter:"blur(0)"}],rotate:[{opacity:0,transform:"rotate(-12deg) scale(0.9)"},{opacity:1,transform:"none"}],"clip-up":[{clipPath:"inset(100% 0 0 0)"},{clipPath:"inset(0 0 0 0)"}],"clip-right":[{clipPath:"inset(0 100% 0 0)"},{clipPath:"inset(0 0 0 0)"}]};function ue(e,t,n,r={}){if(void 0===e||""===e||">"===e)return t;if("number"==typeof e)return Math.max(0,e);const o=String(e).trim();if(/^-?\d+(\.\d+)?$/.test(o))return Math.max(0,Number(o));const a=/^(<|>|[A-Za-z_][\w-]*)?\s*(?:([+-])=\s*(\d+(?:\.\d+)?))?$/.exec(o);if(!a)return t;const s="<"===a[1]?n:">"!==a[1]&&a[1]?r[a[1]]??t:t,i=a[2]?("-"===a[2]?-1:1)*Number(a[3]):0;return Math.max(0,s+i)}const de={passive:!0};
2
2
  /**
3
3
  * use-scroll-animate
4
4
  *
@@ -11,5 +11,5 @@
11
11
  * @license MIT
12
12
  * @see https://github.com/HarrisonCN/use-scroll-animate
13
13
  */
14
- const fe=L();e.EASING_MAP=r,e.PRESETS=t,e.TIMELINE_PRESETS=ie,e.createScrollAnimate=L,e.default=fe,e.getScrollProgress=v,e.parallax=function(e,t={}){const n=b(e);if(!n.length||!i()||!c())return()=>{};const{speed:r=.2,axis:o="y",root:a=null,respectReducedMotion:s=!0}=t,l=t.progressVar?t.progressVar.startsWith("--")?t.progressVar:`--${t.progressVar}`:"--sa-parallax",f="x"===o?"vw":"vh",d=new Set;let m=0,p=!1;const g=a||window,h=e=>{const t=e.style;if(!t)return;const n=v(e,a);if(t.setProperty(l,String(+n.toFixed(4))),s&&u())return void t.removeProperty("translate");const i=`${+((n-.5)*r*100).toFixed(3)}${f}`;t.setProperty("translate","x"===o?`${i} 0px`:`0px ${i}`)},y=()=>{m=0,d.forEach(h)},w=()=>{m||(m=requestAnimationFrame(y))},x=e=>{if(e===p)return;p=e;const t=e?"addEventListener":"removeEventListener";g[t]("scroll",w,le),window[t]("resize",w,le),!e&&m&&(cancelAnimationFrame(m),m=0)},E=new IntersectionObserver(e=>{e.forEach(e=>{e.isIntersecting?d.add(e.target):d.delete(e.target),h(e.target)}),x(d.size>0)},{threshold:0,root:a});return n.forEach(e=>{h(e),E.observe(e)}),()=>{E.disconnect(),x(!1),d.clear(),n.forEach(e=>{const t=e.style;t&&(t.removeProperty("translate"),t.removeProperty(l))})}},e.resolveEasing=o,e.resolvePosition=ce,e.resolvePreset=n,e.staggerChildren=function(e,t={},n){if(!e||!i()||!c())return()=>{};const r=n||F||(F=L()),{stagger:o=80,delay:s=0,threshold:l=.1,rootMargin:f="0px",observeChildren:u=!1,...d}=t;let m=Array.from(e.children),p=!1;const g=[];m.forEach(e=>j(e));const h=new IntersectionObserver(t=>{!p&&t.some(e=>e.isIntersecting)&&(p=!0,h.disconnect(),m.forEach((t,n)=>{t.parentNode===e&&r.animate(t,{...d,delay:s+n*o})}),m=[])},{threshold:l,rootMargin:f});let y;return h.observe(e),u&&"undefined"!=typeof MutationObserver&&(y=new MutationObserver(t=>{t.forEach(t=>{t.addedNodes.forEach(t=>{t instanceof Element&&t.parentNode===e&&(p?(g.push(t),r.observe(t,{...d,delay:s,stagger:o,threshold:l,rootMargin:f})):(j(t),m.push(t)))}),t.removedNodes.forEach(e=>{if(!(e instanceof Element))return;m=m.filter(t=>t!==e);const t=g.indexOf(e);t>=0&&(g.splice(t,1),r.unobserve(e))})})}),y.observe(e,{childList:!0})),()=>{h.disconnect(),y?.disconnect(),p||(p=!0,m.forEach(e=>function(e,t={}){$(e,{...a,...t})}(e)),m=[]),g.forEach(e=>r.unobserve(e)),g.length=0}},e.supportsNativeScrub=ae,e.supportsScrollTimeline=d,e.timeline=function(e={}){const t={duration:600,easing:"cubic-bezier(0.22, 1, 0.36, 1)",stagger:0,...e.defaults},n=[],r=[],o={};let a,s=0,i=0,c=0,l=0,f=1,u=!1;const d=()=>Math.max(s,...r.map(e=>e.at),0),m=(t,o)=>{(()=>{if(!u){u=!0;for(const e of n)"function"==typeof e.el.animate?(e.anim=e.el.animate(e.frames,{duration:e.duration,delay:e.start,easing:e.easing,fill:"both"}),e.anim.pause?.()):e.anim=null}})(),c=Q(t,0,d());for(const e of n)e.anim?e.anim.currentTime=c:I(e.el,e.frames[c>=e.start?e.frames.length-1:0]);for(const e of r)(o<e.at&&c>=e.at||o>e.at&&c<=e.at)&&e.fn();e.onUpdate?.(d()?c/d():1)},p=()=>{l&&K(l),l=0},g=t=>{p(),a?.(),f=t;const n=f>0?d():0,r=Y[R];if(V()||0===r||!d())return m(n,c),e.onComplete?.(),Promise.resolve();const o=(e.speed??1)/r;return new Promise(t=>{a=()=>{a=void 0,t()};let r=Z();const s=()=>{const t=Z(),i=c+(t-r)*o*f;if(r=t,m(i,c),f>0&&c>=n||f<0&&c<=0)return l=0,e.onComplete?.(),void a?.();l=J(s)};l=J(s)})},h={get duration(){return d()},get labels(){return{...o}},get time(){return c},to(e,r,a={}){const c="string"==typeof r?ie[r]||ie.fade:r,l=ce(a.at,s,i,o),f=re(a.duration??t.duration,600),d=a.stagger??t.stagger;let m=l;return(e=>"string"==typeof e?"undefined"==typeof document?[]:Array.from(document.querySelectorAll(e)):e instanceof Element?[e]:Array.from(e))(e).forEach((e,r)=>{const o=l+r*d;n.push({el:e,frames:c,start:o,duration:f,easing:oe(a.easing??t.easing,"cubic-bezier(0.22, 1, 0.36, 1)")}),m=Math.max(m,o+f)}),i=l,s=Math.max(s,m),u=!1,n.forEach(e=>e.anim?.cancel?.()),h},label:(e,t)=>(o[e]=ce(t,s,i,o),h),call:(e,t)=>(r.push({fn:e,at:ce(t,s,i,o)}),h),play:e=>(void 0!==e?m(ce(e,0,0,o),c):c>=d()&&m(0,-1),g(1)),reverse:()=>g(-1),pause:()=>(p(),h),seek:e=>(p(),m(ce(e,0,0,o),c),h),progress:e=>(void 0!==e&&h.seek(Q(e,0,1)*d()),d()?c/d():0),scrub(t,o={}){if(p(),V()||"undefined"==typeof window)return m(d(),c),se(()=>{},!1);const a=o.source??"view",s=o.axis??"block";if(!(!!o.smooth||!!o.offset||r.length>0||!!e.onUpdate||"js"===o.engine)&&d()>0&&ae(a)&&n.every(e=>"function"==typeof e.el.animate)){const e=globalThis,r="scroll"===a?new e.ScrollTimeline({source:t,axis:s}):new e.ViewTimeline({subject:t,axis:s}),o=d();n.forEach(e=>e.anim?.cancel?.()),u=!1;const i=e=>`${(e/o*100).toFixed(3)}%`,l=n.map(e=>{const t="view"===a?{rangeStart:`cover ${i(e.start)}`,rangeEnd:`cover ${i(e.start+e.duration)}`}:{},n={easing:e.easing,fill:"both",timeline:r,...t};return"scroll"===a&&Object.assign(n,{duration:"auto",rangeStart:i(e.start),rangeEnd:i(e.start+e.duration)}),e.el.animate(e.frames,n)});return se(()=>{l.forEach(e=>e.cancel()),m(c,c)},!0)}let i=0,l=c;const f="scroll"===a?t:null,g=()=>{i=0;const e=(()=>{const e="x"===s||"inline"===s;if(f){const t=e?f.scrollWidth-f.clientWidth:f.scrollHeight-f.clientHeight;return Q((e?f.scrollLeft:f.scrollTop)/(t||1),0,1)}const n=t.getBoundingClientRect(),r=(e?window.innerWidth:window.innerHeight)||1,a=e?n.left:n.top,i=e?n.width:n.height;return Q((r+(o.offset??0)-a)/(r+i||1),0,1)})()*d(),n=Q(o.smooth??0,0,.95);l=n?l+(e-l)*(1-n):e,m(l,c),n&&Math.abs(e-l)>.5&&(i=J(g))},h=()=>{i||(i=J(g))},y=f||window;return y.addEventListener("scroll",h,{passive:!0}),window.addEventListener("resize",h,{passive:!0}),g(),se(()=>{y.removeEventListener("scroll",h),window.removeEventListener("resize",h),i&&K(i)},!1)},cancel(){p(),a?.(),n.forEach(e=>e.anim?.cancel?.()),u=!1}};return h},Object.defineProperty(e,"__esModule",{value:!0})});
14
+ const me=R();e.EASING_MAP=a,e.PRESETS=t,e.TIMELINE_PRESETS=fe,e.createScrollAnimate=R,e.default=me,e.getScrollProgress=x,e.parallax=function(e,t={}){const n=w(e);if(!n.length||!l()||!f())return()=>{};const{speed:r=.2,axis:o="y",root:a=null,respectReducedMotion:s=!0}=t,i=t.progressVar?t.progressVar.startsWith("--")?t.progressVar:`--${t.progressVar}`:"--sa-parallax",c="x"===o?"vw":"vh",u=new Set;let d=0,p=!1;const g=a||window,h=e=>{const t=e.style;if(!t)return;const n=x(e,a);if(t.setProperty(i,String(+n.toFixed(4))),s&&m())return void t.removeProperty("translate");const l=`${+((n-.5)*r*100).toFixed(3)}${c}`;t.setProperty("translate","x"===o?`${l} 0px`:`0px ${l}`)},y=()=>{d=0,u.forEach(h)},b=()=>{d||(d=requestAnimationFrame(y))},v=e=>{if(e===p)return;p=e;const t=e?"addEventListener":"removeEventListener";g[t]("scroll",b,de),window[t]("resize",b,de),!e&&d&&(cancelAnimationFrame(d),d=0)},E=new IntersectionObserver(e=>{e.forEach(e=>{e.isIntersecting?u.add(e.target):u.delete(e.target),h(e.target)}),v(u.size>0)},{threshold:0,root:a});return n.forEach(e=>{h(e),E.observe(e)}),()=>{E.disconnect(),v(!1),u.clear(),n.forEach(e=>{const t=e.style;t&&(t.removeProperty("translate"),t.removeProperty(i))})}},e.registerPresets=function(e){Object.assign(t,e)},e.resolveEasing=s,e.resolvePosition=ue,e.resolvePreset=o,e.reversePreset=n,e.staggerChildren=function(e,t={},n){if(!e||!l()||!f())return()=>{};const r=n||V||(V=R()),{stagger:o=80,delay:a=0,threshold:s=.1,rootMargin:c="0px",observeChildren:u=!1,...d}=t;let m=Array.from(e.children),p=!1;const g=[];m.forEach(e=>L(e));const h=new IntersectionObserver(t=>{!p&&t.some(e=>e.isIntersecting)&&(p=!0,h.disconnect(),m.forEach((t,n)=>{t.parentNode===e&&r.animate(t,{...d,delay:a+n*o})}),m=[])},{threshold:s,rootMargin:c});let y;return h.observe(e),u&&"undefined"!=typeof MutationObserver&&(y=new MutationObserver(t=>{t.forEach(t=>{t.addedNodes.forEach(t=>{t instanceof Element&&t.parentNode===e&&(p?(g.push(t),r.observe(t,{...d,delay:a,stagger:o,threshold:s,rootMargin:c})):(L(t),m.push(t)))}),t.removedNodes.forEach(e=>{if(!(e instanceof Element))return;m=m.filter(t=>t!==e);const t=g.indexOf(e);t>=0&&(g.splice(t,1),r.unobserve(e))})})}),y.observe(e,{childList:!0})),()=>{h.disconnect(),y?.disconnect(),p||(p=!0,m.forEach(e=>function(e,t={}){j(e,{...i,...t})}(e)),m=[]),g.forEach(e=>r.unobserve(e)),g.length=0}},e.supportsNativeScrub=ce,e.supportsScrollTimeline=p,e.timeline=function(e={}){const t={duration:600,easing:"cubic-bezier(0.22, 1, 0.36, 1)",stagger:0,...e.defaults},n=[],r=[],o={};let a,s=0,i=0,c=0,l=0,f=1,u=!1;const d=()=>Math.max(s,...r.map(e=>e.at),0),m=(t,o)=>{(()=>{if(!u){u=!0;for(const e of n)"function"==typeof e.el.animate?(e.anim=e.el.animate(e.frames,{duration:e.duration,delay:e.start,easing:e.easing,fill:"both"}),e.anim.pause?.()):e.anim=null}})(),c=ne(t,0,d());for(const e of n)e.anim?e.anim.currentTime=c:D(e.el,e.frames[c>=e.start?e.frames.length-1:0]);for(const e of r)(o<e.at&&c>=e.at||o>e.at&&c<=e.at)&&e.fn();e.onUpdate?.(d()?c/d():1)},p=()=>{l&&te(l),l=0},g=t=>{p(),a?.(),f=t;const n=f>0?d():0,r=I[W];if(q()||0===r||!d())return m(n,c),e.onComplete?.(),Promise.resolve();const o=(e.speed??1)/r;return new Promise(t=>{a=()=>{a=void 0,t()};let r=ee();const s=()=>{const t=ee(),i=c+(t-r)*o*f;if(r=t,m(i,c),f>0&&c>=n||f<0&&c<=0)return l=0,e.onComplete?.(),void a?.();l=Q(s)};l=Q(s)})},h={get duration(){return d()},get labels(){return{...o}},get time(){return c},to(e,r,a={}){const c="string"==typeof r?fe[r]||fe.fade:r,l=ue(a.at,s,i,o),f=se(a.duration??t.duration,600),d=a.stagger??t.stagger;let m=l;return(e=>"string"==typeof e?"undefined"==typeof document?[]:Array.from(document.querySelectorAll(e)):e instanceof Element?[e]:Array.from(e))(e).forEach((e,r)=>{const o=l+r*d;n.push({el:e,frames:c,start:o,duration:f,easing:ie(a.easing??t.easing,"cubic-bezier(0.22, 1, 0.36, 1)")}),m=Math.max(m,o+f)}),i=l,s=Math.max(s,m),u=!1,n.forEach(e=>e.anim?.cancel?.()),h},label:(e,t)=>(o[e]=ue(t,s,i,o),h),call:(e,t)=>(r.push({fn:e,at:ue(t,s,i,o)}),h),play:e=>(void 0!==e?m(ue(e,0,0,o),c):c>=d()&&m(0,-1),g(1)),reverse:()=>g(-1),pause:()=>(p(),h),seek:e=>(p(),m(ue(e,0,0,o),c),h),progress:e=>(void 0!==e&&h.seek(ne(e,0,1)*d()),d()?c/d():0),scrub(t,o={}){if(p(),q()||"undefined"==typeof window)return m(d(),c),le(()=>{},!1);const a=o.source??"view",s=o.axis??"block";if(!(!!o.smooth||!!o.offset||r.length>0||!!e.onUpdate||"js"===o.engine)&&d()>0&&ce(a)&&n.every(e=>"function"==typeof e.el.animate)){const e=globalThis,r="scroll"===a?new e.ScrollTimeline({source:t,axis:s}):new e.ViewTimeline({subject:t,axis:s}),o=d();n.forEach(e=>e.anim?.cancel?.()),u=!1;const i=e=>`${(e/o*100).toFixed(3)}%`,l=n.map(e=>{const t="view"===a?{rangeStart:`cover ${i(e.start)}`,rangeEnd:`cover ${i(e.start+e.duration)}`}:{},n={easing:e.easing,fill:"both",timeline:r,...t};return"scroll"===a&&Object.assign(n,{duration:"auto",rangeStart:i(e.start),rangeEnd:i(e.start+e.duration)}),e.el.animate(e.frames,n)});return le(()=>{l.forEach(e=>e.cancel()),m(c,c)},!0)}let i=0,l=c;const f="scroll"===a?t:null,g=()=>{i=0;const e=(()=>{const e="x"===s||"inline"===s;if(f){const t=e?f.scrollWidth-f.clientWidth:f.scrollHeight-f.clientHeight;return ne((e?f.scrollLeft:f.scrollTop)/(t||1),0,1)}const n=t.getBoundingClientRect(),r=(e?window.innerWidth:window.innerHeight)||1,a=e?n.left:n.top,i=e?n.width:n.height;return ne((r+(o.offset??0)-a)/(r+i||1),0,1)})()*d(),n=ne(o.smooth??0,0,.95);l=n?l+(e-l)*(1-n):e,m(l,c),n&&Math.abs(e-l)>.5&&(i=Q(g))},h=()=>{i||(i=Q(g))},y=f||window;return y.addEventListener("scroll",h,{passive:!0}),window.addEventListener("resize",h,{passive:!0}),g(),le(()=>{y.removeEventListener("scroll",h),window.removeEventListener("resize",h),i&&te(i)},!1)},cancel(){p(),a?.(),n.forEach(e=>e.anim?.cancel?.()),u=!1}};return h},Object.defineProperty(e,"__esModule",{value:!0})});
15
15
  //# sourceMappingURL=index.umd.js.map