use-scroll-animate 4.0.1 → 4.2.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 (90) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/dist/chunks/{base-ZARFccur.js → base-BPG5zvex.js} +2 -2
  3. package/dist/chunks/{base-ZARFccur.js.map → base-BPG5zvex.js.map} +1 -1
  4. package/dist/chunks/{core-DXqZm5Il.cjs → core-BRIIoKeS.cjs} +55 -12
  5. package/dist/chunks/core-BRIIoKeS.cjs.map +1 -0
  6. package/dist/chunks/{core-Co-6AL0h.js → core-LkGRmgES.js} +56 -14
  7. package/dist/chunks/core-LkGRmgES.js.map +1 -0
  8. package/dist/chunks/{core-DKY-fVzR.js → core-eXX8rB_b.js} +2 -2
  9. package/dist/chunks/{core-DKY-fVzR.js.map → core-eXX8rB_b.js.map} +1 -1
  10. package/dist/chunks/{spring-E2ickYNI.js → spring-BziPsW3r.js} +2 -2
  11. package/dist/chunks/{spring-E2ickYNI.js.map → spring-BziPsW3r.js.map} +1 -1
  12. package/dist/chunks/{variants-DvnxvRCM.js → variants-BVYMcxRv.js} +2 -2
  13. package/dist/chunks/{variants-DvnxvRCM.js.map → variants-BVYMcxRv.js.map} +1 -1
  14. package/dist/components/angular.cjs +2 -1
  15. package/dist/components/angular.cjs.map +1 -1
  16. package/dist/components/angular.d.cts +32 -8
  17. package/dist/components/angular.d.ts +32 -8
  18. package/dist/components/angular.js +6 -5
  19. package/dist/components/angular.js.map +1 -1
  20. package/dist/components/background.js +3 -3
  21. package/dist/components/cards.js +3 -3
  22. package/dist/components/click.js +3 -3
  23. package/dist/components/depth.js +4 -4
  24. package/dist/components/feedback.js +2 -2
  25. package/dist/components/gesture.js +5 -5
  26. package/dist/components/interaction.js +2 -2
  27. package/dist/components/layout.js +2 -2
  28. package/dist/components/packs.js +2 -2
  29. package/dist/components/page.js +3 -3
  30. package/dist/components/physics.js +4 -4
  31. package/dist/components/reveal.js +2 -2
  32. package/dist/components/solid.cjs +2 -1
  33. package/dist/components/solid.cjs.map +1 -1
  34. package/dist/components/solid.d.cts +32 -8
  35. package/dist/components/solid.d.ts +32 -8
  36. package/dist/components/solid.js +6 -5
  37. package/dist/components/solid.js.map +1 -1
  38. package/dist/components/svelte.cjs +2 -1
  39. package/dist/components/svelte.cjs.map +1 -1
  40. package/dist/components/svelte.d.cts +32 -8
  41. package/dist/components/svelte.d.ts +32 -8
  42. package/dist/components/svelte.js +6 -5
  43. package/dist/components/svelte.js.map +1 -1
  44. package/dist/components/svg.js +2 -2
  45. package/dist/components/text.js +2 -2
  46. package/dist/components/timeline.cjs +10 -2
  47. package/dist/components/timeline.cjs.map +1 -1
  48. package/dist/components/timeline.d.cts +36 -10
  49. package/dist/components/timeline.d.ts +36 -10
  50. package/dist/components/timeline.js +12 -5
  51. package/dist/components/timeline.js.map +1 -1
  52. package/dist/components/tokens.cjs +226 -0
  53. package/dist/components/tokens.cjs.map +1 -0
  54. package/dist/components/tokens.d.cts +74 -0
  55. package/dist/components/tokens.d.ts +74 -0
  56. package/dist/components/tokens.js +211 -0
  57. package/dist/components/tokens.js.map +1 -0
  58. package/dist/components/transitions.js +2 -2
  59. package/dist/components/ui.js +5 -5
  60. package/dist/components/vue.cjs +2 -1
  61. package/dist/components/vue.cjs.map +1 -1
  62. package/dist/components/vue.d.cts +32 -8
  63. package/dist/components/vue.d.ts +32 -8
  64. package/dist/components/vue.js +6 -5
  65. package/dist/components/vue.js.map +1 -1
  66. package/dist/components/webgl.js +2 -2
  67. package/dist/components.cjs +17 -1
  68. package/dist/components.cjs.map +1 -1
  69. package/dist/components.d.cts +109 -11
  70. package/dist/components.d.ts +109 -11
  71. package/dist/components.js +8 -7
  72. package/dist/components.js.map +1 -1
  73. package/dist/components.umd.js +2 -2
  74. package/dist/components.umd.js.map +1 -1
  75. package/dist/index.cjs +3 -1
  76. package/dist/index.cjs.map +1 -1
  77. package/dist/index.d.cts +33 -9
  78. package/dist/index.d.ts +33 -9
  79. package/dist/index.js +3 -2
  80. package/dist/index.js.map +1 -1
  81. package/dist/index.umd.js +2 -2
  82. package/dist/index.umd.js.map +1 -1
  83. package/docs/API.md +3 -1
  84. package/docs/ROADMAP.md +2 -2
  85. package/docs/motion-tokens.css +31 -0
  86. package/docs/motion-tokens.md +46 -0
  87. package/docs/motion.tokens.json +132 -0
  88. package/package.json +11 -1
  89. package/dist/chunks/core-Co-6AL0h.js.map +0 -1
  90. package/dist/chunks/core-DXqZm5Il.cjs.map +0 -1
package/dist/index.cjs CHANGED
@@ -4,8 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var core = require('./chunks/core-qpECfEkb.cjs');
6
6
  var stagger = require('./chunks/stagger-CLc3j58T.cjs');
7
- var core$1 = require('./chunks/core-DXqZm5Il.cjs');
7
+ var core$1 = require('./chunks/core-BRIIoKeS.cjs');
8
8
  require('./chunks/base-CXx7jZ-o.cjs');
9
+ require('./components/tokens.cjs');
9
10
 
10
11
  /**
11
12
  * use-scroll-animate - parallax() helper
@@ -138,6 +139,7 @@ exports.supportsScrollTimeline = core.supportsScrollTimeline;
138
139
  exports.staggerChildren = stagger.staggerChildren;
139
140
  exports.TIMELINE_PRESETS = core$1.TIMELINE_PRESETS;
140
141
  exports.resolvePosition = core$1.resolvePosition;
142
+ exports.supportsNativeScrub = core$1.supportsNativeScrub;
141
143
  exports.timeline = core$1.timeline;
142
144
  exports.default = ScrollAnimate;
143
145
  exports.parallax = parallax;
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","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 } 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 } 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":["resolveTargets","hasDOM","supportsObserver","getScrollProgress","prefersReducedMotion","createScrollAnimate"],"mappings":"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"}
1
+ {"version":3,"file":"index.cjs","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":["resolveTargets","hasDOM","supportsObserver","getScrollProgress","prefersReducedMotion","createScrollAnimate"],"mappings":"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"}
package/dist/index.d.cts CHANGED
@@ -228,9 +228,9 @@ declare function staggerChildren(container: Element | null | undefined, options?
228
228
  */
229
229
  type TimelinePosition = number | string;
230
230
  interface TimelineStepOptions {
231
- /** Duration in ms (default: timeline default, 600). */
232
- duration?: number;
233
- /** CSS easing (default `cubic-bezier(0.22, 1, 0.36, 1)`). */
231
+ /** Duration in ms or a motion token name (`'fast'`, `'slow'`…; 4.2). Default: timeline default, 600. */
232
+ duration?: number | string;
233
+ /** CSS easing or a motion token name (`'emphasized'`, `'spring'`…; 4.2). Default `cubic-bezier(0.22, 1, 0.36, 1)`. */
234
234
  easing?: string;
235
235
  /** Start position, see `TimelinePosition`. */
236
236
  at?: TimelinePosition;
@@ -248,11 +248,29 @@ interface TimelineOptions {
248
248
  onUpdate?: (progress: number) => void;
249
249
  }
250
250
  interface ScrubOptions {
251
- /** Scroll offset (px) before the source's top reaches the viewport bottom where progress starts. */
251
+ /** Scroll offset (px) before the source's top reaches the viewport bottom where progress starts (JS engine only). */
252
252
  offset?: number;
253
- /** Smoothing 0–1 (0 = immediate, default 0). */
253
+ /** Smoothing 0–1 (0 = immediate, default 0). Smoothing needs the JS engine. */
254
254
  smooth?: number;
255
+ /**
256
+ * 4.1: which progress source drives the timeline.
257
+ * - `'view'` (default): `source` moving through the viewport (CSS `ViewTimeline`, range `cover`).
258
+ * - `'scroll'`: the scroll position of `source` itself (a scroll container; CSS `ScrollTimeline`).
259
+ */
260
+ source?: 'view' | 'scroll';
261
+ /** 4.1: `'auto'` (default) uses the browser's native scroll-driven animations when available, `'js'` forces the fallback. */
262
+ engine?: 'auto' | 'native' | 'js';
263
+ /** 4.1: scroll axis, `'block'` (default) · `'inline'` · `'x'` · `'y'`. */
264
+ axis?: 'block' | 'inline' | 'x' | 'y';
255
265
  }
266
+ /** The function `scrub()` returns: call it to stop. `native` tells which engine runs it. */
267
+ interface ScrubHandle {
268
+ (): void;
269
+ /** `true` when the browser's ScrollTimeline / ViewTimeline drives it (compositor, no JS per frame). */
270
+ readonly native: boolean;
271
+ }
272
+ /** 4.1: whether `scrub()` can use native ScrollTimeline / ViewTimeline here. */
273
+ declare function supportsNativeScrub(source?: 'view' | 'scroll'): boolean;
256
274
  interface Timeline {
257
275
  /** Total length in ms. */
258
276
  readonly duration: number;
@@ -275,8 +293,14 @@ interface Timeline {
275
293
  seek(to: TimelinePosition): Timeline;
276
294
  /** Get or set progress 0–1. */
277
295
  progress(p?: number): number;
278
- /** Tie progress to the scroll position of `source` (it moves through the viewport). Returns a stop function. */
279
- scrub(source: Element, options?: ScrubOptions): () => void;
296
+ /**
297
+ * Tie progress to scroll: `source` moving through the viewport (or, with
298
+ * `{ source: 'scroll' }`, a scroll container's own position). Runs on native
299
+ * ScrollTimeline / ViewTimeline when available (and no `smooth`, `offset`,
300
+ * `call()` cues or `onUpdate` need JS), else on a rAF-throttled listener.
301
+ * Returns a stop function with a `native` flag.
302
+ */
303
+ scrub(source: Element, options?: ScrubOptions): ScrubHandle;
280
304
  /** Stop and drop every animation (elements keep their last frame). */
281
305
  cancel(): void;
282
306
  }
@@ -372,5 +396,5 @@ declare function resolveEasing(easing: EasingType): string;
372
396
  */
373
397
  declare const ScrollAnimate: ScrollAnimateInstance;
374
398
 
375
- export { EASING_MAP, PRESETS, TIMELINE_PRESETS, createScrollAnimate, ScrollAnimate as default, getScrollProgress, parallax, resolveEasing, resolvePosition, resolvePreset, staggerChildren, supportsScrollTimeline, timeline };
376
- export type { AnimateOptions, AnimatedElement, AnimationKeyframe, AnimationPreset, CustomAnimation, EasingType, ParallaxHelperOptions, ProgressMode, ScrollAnimateConfig, ScrollAnimateInstance, ScrollEngine, ScrubOptions, StaggerOptions, Timeline, TimelineOptions, TimelinePosition, TimelineStepOptions };
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 };
package/dist/index.d.ts CHANGED
@@ -228,9 +228,9 @@ declare function staggerChildren(container: Element | null | undefined, options?
228
228
  */
229
229
  type TimelinePosition = number | string;
230
230
  interface TimelineStepOptions {
231
- /** Duration in ms (default: timeline default, 600). */
232
- duration?: number;
233
- /** CSS easing (default `cubic-bezier(0.22, 1, 0.36, 1)`). */
231
+ /** Duration in ms or a motion token name (`'fast'`, `'slow'`…; 4.2). Default: timeline default, 600. */
232
+ duration?: number | string;
233
+ /** CSS easing or a motion token name (`'emphasized'`, `'spring'`…; 4.2). Default `cubic-bezier(0.22, 1, 0.36, 1)`. */
234
234
  easing?: string;
235
235
  /** Start position, see `TimelinePosition`. */
236
236
  at?: TimelinePosition;
@@ -248,11 +248,29 @@ interface TimelineOptions {
248
248
  onUpdate?: (progress: number) => void;
249
249
  }
250
250
  interface ScrubOptions {
251
- /** Scroll offset (px) before the source's top reaches the viewport bottom where progress starts. */
251
+ /** Scroll offset (px) before the source's top reaches the viewport bottom where progress starts (JS engine only). */
252
252
  offset?: number;
253
- /** Smoothing 0–1 (0 = immediate, default 0). */
253
+ /** Smoothing 0–1 (0 = immediate, default 0). Smoothing needs the JS engine. */
254
254
  smooth?: number;
255
+ /**
256
+ * 4.1: which progress source drives the timeline.
257
+ * - `'view'` (default): `source` moving through the viewport (CSS `ViewTimeline`, range `cover`).
258
+ * - `'scroll'`: the scroll position of `source` itself (a scroll container; CSS `ScrollTimeline`).
259
+ */
260
+ source?: 'view' | 'scroll';
261
+ /** 4.1: `'auto'` (default) uses the browser's native scroll-driven animations when available, `'js'` forces the fallback. */
262
+ engine?: 'auto' | 'native' | 'js';
263
+ /** 4.1: scroll axis, `'block'` (default) · `'inline'` · `'x'` · `'y'`. */
264
+ axis?: 'block' | 'inline' | 'x' | 'y';
255
265
  }
266
+ /** The function `scrub()` returns: call it to stop. `native` tells which engine runs it. */
267
+ interface ScrubHandle {
268
+ (): void;
269
+ /** `true` when the browser's ScrollTimeline / ViewTimeline drives it (compositor, no JS per frame). */
270
+ readonly native: boolean;
271
+ }
272
+ /** 4.1: whether `scrub()` can use native ScrollTimeline / ViewTimeline here. */
273
+ declare function supportsNativeScrub(source?: 'view' | 'scroll'): boolean;
256
274
  interface Timeline {
257
275
  /** Total length in ms. */
258
276
  readonly duration: number;
@@ -275,8 +293,14 @@ interface Timeline {
275
293
  seek(to: TimelinePosition): Timeline;
276
294
  /** Get or set progress 0–1. */
277
295
  progress(p?: number): number;
278
- /** Tie progress to the scroll position of `source` (it moves through the viewport). Returns a stop function. */
279
- scrub(source: Element, options?: ScrubOptions): () => void;
296
+ /**
297
+ * Tie progress to scroll: `source` moving through the viewport (or, with
298
+ * `{ source: 'scroll' }`, a scroll container's own position). Runs on native
299
+ * ScrollTimeline / ViewTimeline when available (and no `smooth`, `offset`,
300
+ * `call()` cues or `onUpdate` need JS), else on a rAF-throttled listener.
301
+ * Returns a stop function with a `native` flag.
302
+ */
303
+ scrub(source: Element, options?: ScrubOptions): ScrubHandle;
280
304
  /** Stop and drop every animation (elements keep their last frame). */
281
305
  cancel(): void;
282
306
  }
@@ -372,5 +396,5 @@ declare function resolveEasing(easing: EasingType): string;
372
396
  */
373
397
  declare const ScrollAnimate: ScrollAnimateInstance;
374
398
 
375
- export { EASING_MAP, PRESETS, TIMELINE_PRESETS, createScrollAnimate, ScrollAnimate as default, getScrollProgress, parallax, resolveEasing, resolvePosition, resolvePreset, staggerChildren, supportsScrollTimeline, timeline };
376
- export type { AnimateOptions, AnimatedElement, AnimationKeyframe, AnimationPreset, CustomAnimation, EasingType, ParallaxHelperOptions, ProgressMode, ScrollAnimateConfig, ScrollAnimateInstance, ScrollEngine, ScrubOptions, StaggerOptions, Timeline, TimelineOptions, TimelinePosition, TimelineStepOptions };
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 };
package/dist/index.js CHANGED
@@ -1,8 +1,9 @@
1
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
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
3
  export { s as staggerChildren } from './chunks/stagger-BFAhKknX.js';
4
- export { T as TIMELINE_PRESETS, r as resolvePosition, t as timeline } from './chunks/core-Co-6AL0h.js';
5
- import './chunks/base-ZARFccur.js';
4
+ export { T as TIMELINE_PRESETS, r as resolvePosition, s as supportsNativeScrub, t as timeline } from './chunks/core-LkGRmgES.js';
5
+ import './chunks/base-BPG5zvex.js';
6
+ import './components/tokens.js';
6
7
 
7
8
  /**
8
9
  * use-scroll-animate - parallax() helper
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 } 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 } 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, 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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"}
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 f,l;function d(){return!!i()&&(void 0===f&&(f="function"==typeof window.matchMedia?window.matchMedia("(prefers-reduced-motion: reduce)"):null),!!f&&f.matches)}function u(){return void 0===l&&(l=i()&&"undefined"!=typeof CSS&&"function"==typeof CSS.supports&&CSS.supports("animation-timeline: view()")&&"function"==typeof globalThis.ViewTimeline),l}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 f=e("engine")?.trim();"auto"!==f&&"js"!==f&&"css"!==f||(t.engine=f);const l=e("view-range");if(l){const[e,n]=l.split(",").map(e=>e.trim());e&&n&&(t.viewRange=[e,n])}const d=e("exit");if(void 0!==d){const e=d.trim();t.exit=""===e||"true"===e||"false"!==e&&(e.includes(",")?e.split(",").map(e=>e.trim()):e)}const u=e("progress");return u&&(t.progressMode="scroll"===u.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 v(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,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 M(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 S(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,P;function O(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,f=!0;const l=i.replace(/#/g,()=>{const[e,t]=a[c],[r,o]=s[c++];t!==o&&0!==e&&0!==r&&t&&o&&(f=!1);const i=t||o;return`${+(e+(r-e)*n).toFixed(4)}${i}`});return f?l:n<.5?e:t}(e.from[n],e.to[n],t)}),o}),easing:"linear"}}function $(e,t){if(M(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||d()}function k(e,t,r,o=0,a){const{duration:s,delay:i,stagger:c,onStart:f,onComplete:l}=t,d=Math.max(0,i+o*c);if(M(e),X(r))return $(e,r),f(e),void l(e);if(r.useClassNames)return d>0&&(e.style.animationDelay=`${d}ms`),e.classList.remove(r.hiddenClass),e.classList.add(r.visibleClass),f(e),a?.add(e),void E.set(e,setTimeout(()=>{E.delete(e),a?.delete(e),l(e)},s+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 S(e,u.to),f(e),void l(e);const m=O(u,t.easing),p={duration:s,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"})}x.set(e,g),f(e),g.onfinish=()=>{if(x.get(e)===g){x.delete(e);try{g.commitStyles()}catch{S(e,u.to)}g.cancel()}l(e)}}function F(e,t){if(M(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={...a,...t};X(n)||F(e,n)}function N(){if(!P){P=[];for(let e=0;e<=100;e++)P.push(e/100)}return P}const T={passive:!0};function Y(e={}){let t={...a,...e};const r=new Map;let o=new WeakSet;const f=new Set;let l=0,d=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 P(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&&$(e,t):n?(g.delete(e),$(e,t)):!1===e.isConnected&&g.delete(e))}function L(){r.forEach((e,t)=>{!1===t.isConnected&&P(t,!1)})}function Y(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 j(){l=0,f.forEach(e=>{const n=r.get(e);n&&Y(e,n,b(e,t.root))})}const R=()=>l||(l=requestAnimationFrame(j));function z(e){if(e===!!d)return;const n=e?"addEventListener":"removeEventListener",r=d||t.root||window;r[n]("scroll",R,T),window[n]("resize",R,T),d=e?r:null,!e&&l&&(cancelAnimationFrame(l),l=0)}function I(e){f.delete(e)&&!f.size&&z(!1)}function V(e){e.forEach(e=>{const n=e.target,o=r.get(n);o&&(e.isIntersecting?(f.add(n),z(!0)):I(n),Y(n,o,b(n,t.root)))})}function q(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)}k(s,c,t,e,p),i.animated=!0,c.once&&!c.repeat&&(i.observer.unobserve(s),t.autoUnregister&&!i.progressObserver&&(o.add(s),P(s,!1)))}else c.onLeave(s),c.repeat&&i.animated&&(X(t)||(c.exit?function(e,t,r){if(r.useClassNames||"function"!=typeof e.animate)return void F(e,r);M(e);const o=n(!0===t.exit?t.animation:t.exit),a=O({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):F(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),P(s,!1)))):(c.onLeave(s),c.repeat&&(i.animated=!1));else P(s,!1)})}function W(e){e.forEach(e=>{const t=r.get(e.target);t&&Y(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(q,{threshold:r,rootMargin:n,root:o}))}function _(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(V,{threshold:0,rootMargin:e.rootMargin,root:n})):A(n,`p|${e.rootMargin}`,()=>new IntersectionObserver(W,{threshold:N(),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&&!X(t)&&u()})(a)&&(M(e),function(e,t,r){if("function"!=typeof e.animate)return null;const o=n(t.animation),a=O(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=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{S(e,o.to)}s.cancel(),r?.()}t.onComplete(e)},s}(e,a,()=>g.delete(e))&&(s.engine="css",g.add(e))),"js"!==s.engine||X(t)||F(e,t),r.set(e,s),_(e,s,!0)}function B(e){r.has(e)||U(e,h(e,t))}const H={observe(e,n={}){L();const r=y(n,t);v(e).forEach(e=>U(e,r))},unobserve(e){v(e).forEach(e=>{o.delete(e),P(e,!0)})},init(e){const t=e??(i()?document:null);t&&(L(),t.querySelectorAll("[data-sa]").forEach(B))},watch(e){const t=e??(i()?document:null);if(!t||"undefined"==typeof MutationObserver)return s;H.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&&L()});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=>{x.has(e)&&$(e,t)}),g.clear(),C.forEach(e=>e.forEach(e=>e.disconnect())),C.clear(),r.clear(),f.clear(),z(!1),o=new WeakSet},refresh(){C.forEach(e=>e.forEach(e=>e.disconnect())),C.clear(),f.clear(),z(!1),L(),c()&&r.forEach((e,t)=>{_(t,e,!(e.animated&&e.options.once&&!e.options.repeat))})},animate(e,n={}){const r=y(n,t);v(e).forEach(e=>k(e,r,t,0,p))},getObservedElements:()=>Array.from(r.values()),configure(e){t={...t,...e}}};return H}let j=null;const R={off:0,low:.6,normal:1,high:1.25},z="normal";function I(){return"function"==typeof matchMedia&&!!matchMedia("(prefers-reduced-motion: reduce)").matches}function V(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 q=e=>"function"==typeof requestAnimationFrame?requestAnimationFrame(e):setTimeout(()=>e(Date.now()),16),W=()=>"undefined"!=typeof performance?performance.now():Date.now(),D=e=>{"function"==typeof cancelAnimationFrame?cancelAnimationFrame(e):clearTimeout(e)},_=(e,t,n)=>Math.min(n,Math.max(t,e)),U={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 B(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 H={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={"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"},i=()=>{},s=()=>"undefined"!=typeof window&&"undefined"!=typeof document,c=()=>s()&&"undefined"!=typeof IntersectionObserver;let l,f;function u(){return!!s()&&(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=s()&&"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 i=e("repeat");void 0!==i&&(t.repeat="false"!==i);const s=e("once");void 0!==s&&(t.once="false"!==s),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??i,onComplete:e.onComplete??i,onEnter:e.onEnter??i,onLeave:e.onLeave??i,onProgress:e.onProgress??i,progressMode:e.progressMode??"ratio",progressVar:e.progressVar?g(e.progressVar):"",engine:n,viewRange:e.viewRange??p,exit:r}}function b(e){return e&&s()?"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(!s())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 i=(r+o-n.top)/a;return i<0?0:i>1?1:i}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=[],i=[],s=r.replace(C,(e,t,n)=>(a.push([parseFloat(t),n]),"#"));if(s!==o.replace(C,(e,t,n)=>(i.push([parseFloat(t),n]),"#"))||a.length!==i.length)return n<.5?e:t;let c=0,l=!0;const f=s.replace(/#/g,()=>{const[e,t]=a[c],[r,o]=i[c++];t!==o&&0!==e&&0!==r&&t&&o&&(l=!1);const s=t||o;return`${+(e+(r-e)*n).toFixed(4)}${s}`});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 T(e){return!!e.disabled||u()}function k(e,t,r,o=0,a){const{duration:i,delay:s,stagger:c,onStart:l,onComplete:f}=t,u=Math.max(0,s+o*c);if(S(e),T(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)},i+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:i,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};T(n)||X(e,n)}function F(){if(!O){O=[];for(let e=0;e<=100;e++)O.push(e/100)}return O}const N={passive:!0};function z(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 z(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(){f=0,l.forEach(e=>{const n=r.get(e);n&&z(e,n,v(e,t.root))})}const Y=()=>f||(f=requestAnimationFrame(L));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),z(n,o,v(n,t.root)))})}function W(e){const a=new Map;e.forEach(e=>{const i=e.target,s=r.get(i);if(!s)return;const c=s.options;if(!1!==i.isConnected)if("css"!==s.engine)if(e.isIntersecting){if(c.onEnter(i),s.animated&&!c.repeat)return;let e=0;if(c.stagger>0){const t=i.parentElement;e=a.get(t)??0,a.set(t,e+1)}k(i,c,t,e,p),s.animated=!0,c.once&&!c.repeat&&(s.observer.unobserve(i),t.autoUnregister&&!s.progressObserver&&(o.add(i),O(i,!1)))}else c.onLeave(i),c.repeat&&s.animated&&(T(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),i={duration:t.duration,easing:a.easing,fill:"forwards"};let s;try{s=e.animate(a.keyframes,i)}catch{s=e.animate(a.keyframes,{...i,easing:"ease"})}w.set(e,s)}(i,c,t):X(i,t)),s.animated=!1);else e.isIntersecting?(c.onEnter(i),s.animated||(s.animated=!0,c.onStart(i)),c.once&&!c.repeat&&(s.observer.unobserve(i),t.autoUnregister&&!s.progressObserver&&(o.add(i),O(i,!1)))):(c.onLeave(i),c.repeat&&(s.animated=!1));else O(i,!1)})}function q(e){e.forEach(e=>{const t=r.get(e.target);t&&z(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,i=n[3]??o,s=/^(-?\d*\.?\d+)(px)?$/.exec(a);return`${r} ${o} ${(s?parseFloat(s[1]):0)-t}px ${i}`}(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!==i||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:F(),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 i={element:e,options:a,animated:!1,engine:"js"};(function(e){return"js"!==e.engine&&!t.useClassNames&&!T(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 i;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{i=e.animate(a.keyframes,r)}catch{i=e.animate(a.keyframes,{...r,easing:"linear"})}}catch{return null}if(w.set(e,i),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 s=t.repeat||!t.once;return i.onfinish=()=>{if(!s&&w.get(e)===i){w.delete(e);try{i.commitStyles()}catch{M(e,o.to)}i.cancel(),r?.()}t.onComplete(e)},i}(e,a,()=>g.delete(e))&&(i.engine="css",g.add(e))),"js"!==i.engine||T(t)||X(e,t),r.set(e,i),H(e,i,!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??(s()?document:null);t&&(j(),t.querySelectorAll("[data-sa]").forEach(_))},watch(e){const t=e??(s()?document:null);if(!t||"undefined"==typeof MutationObserver)return i;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=>k(e,r,t,0,p))},getObservedElements:()=>Array.from(r.values()),configure(e){t={...t,...e}}};return B}let L=null;const Y={off:0,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=e=>"function"==typeof requestAnimationFrame?requestAnimationFrame(e):setTimeout(()=>e(Date.now()),16),q=()=>"undefined"!=typeof performance?performance.now():Date.now(),D=e=>{"function"==typeof cancelAnimationFrame?cancelAnimationFrame(e):clearTimeout(e)},H=(e,t,n)=>Math.min(n,Math.max(t,e));let U={duration:{...(_={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:{..._.easing},spring:Object.fromEntries(Object.entries(_.spring).map(([e,t])=>[e,{...t}]))};var _;function B(e){if("number"==typeof e&&isFinite(e))return e;if("object"==typeof e&&e&&"value"in e&&"unit"in e)return B(`${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 G(e,t){return"number"==typeof e?e:"string"==typeof e?U.duration[e]??B(e)??t:t}function J(e,t){return e?U.easing[e]??e:t}function Z(e="view"){const t=globalThis;return"function"==typeof t["scroll"===e?"ScrollTimeline":"ViewTimeline"]&&"function"==typeof t.Element?.prototype?.animate}const K=(e,t)=>Object.assign(e,{native:t}),Q={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 ee(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 i="<"===a[1]?n:">"!==a[1]&&a[1]?r[a[1]]??t:t,s=a[2]?("-"===a[2]?-1:1)*Number(a[3]):0;return Math.max(0,i+s)}const te={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 G=Y();e.EASING_MAP=r,e.PRESETS=t,e.TIMELINE_PRESETS=U,e.createScrollAnimate=Y,e.default=G,e.getScrollProgress=b,e.parallax=function(e,t={}){const n=v(e);if(!n.length||!i()||!c())return()=>{};const{speed:r=.2,axis:o="y",root:a=null,respectReducedMotion:s=!0}=t,f=t.progressVar?t.progressVar.startsWith("--")?t.progressVar:`--${t.progressVar}`:"--sa-parallax",l="x"===o?"vw":"vh",u=new Set;let m=0,p=!1;const g=a||window,h=e=>{const t=e.style;if(!t)return;const n=b(e,a);if(t.setProperty(f,String(+n.toFixed(4))),s&&d())return void t.removeProperty("translate");const i=`${+((n-.5)*r*100).toFixed(3)}${l}`;t.setProperty("translate","x"===o?`${i} 0px`:`0px ${i}`)},y=()=>{m=0,u.forEach(h)},x=()=>{m||(m=requestAnimationFrame(y))},w=e=>{if(e===p)return;p=e;const t=e?"addEventListener":"removeEventListener";g[t]("scroll",x,H),window[t]("resize",x,H),!e&&m&&(cancelAnimationFrame(m),m=0)},E=new IntersectionObserver(e=>{e.forEach(e=>{e.isIntersecting?u.add(e.target):u.delete(e.target),h(e.target)}),w(u.size>0)},{threshold:0,root:a});return n.forEach(e=>{h(e),E.observe(e)}),()=>{E.disconnect(),w(!1),u.clear(),n.forEach(e=>{const t=e.style;t&&(t.removeProperty("translate"),t.removeProperty(f))})}},e.resolveEasing=o,e.resolvePosition=B,e.resolvePreset=n,e.staggerChildren=function(e,t={},n){if(!e||!i()||!c())return()=>{};const r=n||j||(j=Y()),{stagger:o=80,delay:s=0,threshold:f=.1,rootMargin:l="0px",observeChildren:d=!1,...u}=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,{...u,delay:s+n*o})}),m=[])},{threshold:f,rootMargin:l});let y;return h.observe(e),d&&"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,{...u,delay:s,stagger:o,threshold:f,rootMargin:l})):(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={}){$(e,{...a,...t})}(e)),m=[]),g.forEach(e=>r.unobserve(e)),g.length=0}},e.supportsScrollTimeline=u,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,f=0,l=1,d=!1;const u=()=>Math.max(s,...r.map(e=>e.at),0),m=(t,o)=>{(()=>{if(!d){d=!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=_(t,0,u());for(const e of n)e.anim?e.anim.currentTime=c:V(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?.(u()?c/u():1)},p=()=>{f&&D(f),f=0},g=t=>{p(),a?.(),l=t;const n=l>0?u():0,r=R[z];if(I()||0===r||!u())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=W();const s=()=>{const t=W(),i=c+(t-r)*o*l;if(r=t,m(i,c),l>0&&c>=n||l<0&&c<=0)return f=0,e.onComplete?.(),void a?.();f=q(s)};f=q(s)})},h={get duration(){return u()},get labels(){return{...o}},get time(){return c},to(e,r,a={}){const c="string"==typeof r?U[r]||U.fade:r,f=B(a.at,s,i,o),l=a.duration??t.duration,u=a.stagger??t.stagger;let m=f;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=f+r*u;n.push({el:e,frames:c,start:o,duration:l,easing:a.easing??t.easing}),m=Math.max(m,o+l)}),i=f,s=Math.max(s,m),d=!1,n.forEach(e=>e.anim?.cancel?.()),h},label:(e,t)=>(o[e]=B(t,s,i,o),h),call:(e,t)=>(r.push({fn:e,at:B(t,s,i,o)}),h),play:e=>(void 0!==e?m(B(e,0,0,o),c):c>=u()&&m(0,-1),g(1)),reverse:()=>g(-1),pause:()=>(p(),h),seek:e=>(p(),m(B(e,0,0,o),c),h),progress:e=>(void 0!==e&&h.seek(_(e,0,1)*u()),u()?c/u():0),scrub(e,t={}){if(p(),I()||"undefined"==typeof window)return m(u(),c),()=>{};let n=0,r=c;const o=()=>{n=0;const a=e.getBoundingClientRect(),s=window.innerHeight||1,i=_((s+(t.offset??0)-a.top)/(s+a.height||1),0,1)*u(),f=_(t.smooth??0,0,.95);r=f?r+(i-r)*(1-f):i,m(r,c),f&&Math.abs(i-r)>.5&&(n=q(o))},a=()=>{n||(n=q(o))};return window.addEventListener("scroll",a,{passive:!0}),window.addEventListener("resize",a,{passive:!0}),o(),()=>{window.removeEventListener("scroll",a),window.removeEventListener("resize",a),n&&D(n)}},cancel(){p(),a?.(),n.forEach(e=>e.anim?.cancel?.()),d=!1}};return h},Object.defineProperty(e,"__esModule",{value:!0})});
14
+ const ne=z();e.EASING_MAP=r,e.PRESETS=t,e.TIMELINE_PRESETS=Q,e.createScrollAnimate=z,e.default=ne,e.getScrollProgress=v,e.parallax=function(e,t={}){const n=b(e);if(!n.length||!s()||!c())return()=>{};const{speed:r=.2,axis:o="y",root:a=null,respectReducedMotion:i=!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))),i&&u())return void t.removeProperty("translate");const s=`${+((n-.5)*r*100).toFixed(3)}${f}`;t.setProperty("translate","x"===o?`${s} 0px`:`0px ${s}`)},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,te),window[t]("resize",w,te),!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=ee,e.resolvePreset=n,e.staggerChildren=function(e,t={},n){if(!e||!s()||!c())return()=>{};const r=n||L||(L=z()),{stagger:o=80,delay:i=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:i+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:i,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=Z,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,i=0,s=0,c=0,l=0,f=1,u=!1;const d=()=>Math.max(i,...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=H(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&&D(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=q();const i=()=>{const t=q(),s=c+(t-r)*o*f;if(r=t,m(s,c),f>0&&c>=n||f<0&&c<=0)return l=0,e.onComplete?.(),void a?.();l=W(i)};l=W(i)})},h={get duration(){return d()},get labels(){return{...o}},get time(){return c},to(e,r,a={}){const c="string"==typeof r?Q[r]||Q.fade:r,l=ee(a.at,i,s,o),f=G(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:J(a.easing??t.easing,"cubic-bezier(0.22, 1, 0.36, 1)")}),m=Math.max(m,o+f)}),s=l,i=Math.max(i,m),u=!1,n.forEach(e=>e.anim?.cancel?.()),h},label:(e,t)=>(o[e]=ee(t,i,s,o),h),call:(e,t)=>(r.push({fn:e,at:ee(t,i,s,o)}),h),play:e=>(void 0!==e?m(ee(e,0,0,o),c):c>=d()&&m(0,-1),g(1)),reverse:()=>g(-1),pause:()=>(p(),h),seek:e=>(p(),m(ee(e,0,0,o),c),h),progress:e=>(void 0!==e&&h.seek(H(e,0,1)*d()),d()?c/d():0),scrub(t,o={}){if(p(),V()||"undefined"==typeof window)return m(d(),c),K(()=>{},!1);const a=o.source??"view",i=o.axis??"block";if(!(!!o.smooth||!!o.offset||r.length>0||!!e.onUpdate||"js"===o.engine)&&d()>0&&Z(a)&&n.every(e=>"function"==typeof e.el.animate)){const e=globalThis,r="scroll"===a?new e.ScrollTimeline({source:t,axis:i}):new e.ViewTimeline({subject:t,axis:i}),o=d();n.forEach(e=>e.anim?.cancel?.()),u=!1;const s=e=>`${(e/o*100).toFixed(3)}%`,l=n.map(e=>{const t="view"===a?{rangeStart:`cover ${s(e.start)}`,rangeEnd:`cover ${s(e.start+e.duration)}`}:{},n={easing:e.easing,fill:"both",timeline:r,...t};return"scroll"===a&&Object.assign(n,{duration:"auto",rangeStart:s(e.start),rangeEnd:s(e.start+e.duration)}),e.el.animate(e.frames,n)});return K(()=>{l.forEach(e=>e.cancel()),m(c,c)},!0)}let s=0,l=c;const f="scroll"===a?t:null,g=()=>{s=0;const e=(()=>{const e="x"===i||"inline"===i;if(f){const t=e?f.scrollWidth-f.clientWidth:f.scrollHeight-f.clientHeight;return H((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,s=e?n.width:n.height;return H((r+(o.offset??0)-a)/(r+s||1),0,1)})()*d(),n=H(o.smooth??0,0,.95);l=n?l+(e-l)*(1-n):e,m(l,c),n&&Math.abs(e-l)>.5&&(s=W(g))},h=()=>{s||(s=W(g))},y=f||window;return y.addEventListener("scroll",h,{passive:!0}),window.addEventListener("resize",h,{passive:!0}),g(),K(()=>{y.removeEventListener("scroll",h),window.removeEventListener("resize",h),s&&D(s)},!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