use-scroll-animate 6.0.1 → 6.1.1

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 (320) hide show
  1. package/CHANGELOG.md +31 -0
  2. package/README.md +157 -373
  3. package/README_ja.md +171 -145
  4. package/README_zh.md +169 -167
  5. package/dist/chunks/{base-B5i8qQPR.cjs → base-BaQV-2ha.cjs} +3 -3
  6. package/dist/chunks/base-BaQV-2ha.cjs.map +1 -0
  7. package/dist/chunks/{base-C3Sw9sAO.js → base-Yno7N2eC.js} +3 -3
  8. package/dist/chunks/base-Yno7N2eC.js.map +1 -0
  9. package/dist/chunks/{core-qpECfEkb.cjs → core-B5T0dhFH.cjs} +14 -210
  10. package/dist/chunks/core-B5T0dhFH.cjs.map +1 -0
  11. package/dist/chunks/{core-BDcszY4L.cjs → core-BGAyaY6L.cjs} +2 -2
  12. package/dist/chunks/{core-BDcszY4L.cjs.map → core-BGAyaY6L.cjs.map} +1 -1
  13. package/dist/chunks/{core-BTf__I-8.js → core-BIOaYdgN.js} +2 -2
  14. package/dist/chunks/{core-BTf__I-8.js.map → core-BIOaYdgN.js.map} +1 -1
  15. package/dist/chunks/{core-DN3hHbHh.js → core-CUGCsMsJ.js} +2 -2
  16. package/dist/chunks/{core-DN3hHbHh.js.map → core-CUGCsMsJ.js.map} +1 -1
  17. package/dist/chunks/{core-mV_TPgG_.js → core-D7cVumUu.js} +11 -203
  18. package/dist/chunks/core-D7cVumUu.js.map +1 -0
  19. package/dist/chunks/{core-BjOYKSrV.cjs → core-zq17EeCI.cjs} +2 -2
  20. package/dist/chunks/{core-BjOYKSrV.cjs.map → core-zq17EeCI.cjs.map} +1 -1
  21. package/dist/chunks/{fx-ChjxrMBo.js → fx-BqDeFywO.js} +2 -2
  22. package/dist/chunks/{fx-ChjxrMBo.js.map → fx-BqDeFywO.js.map} +1 -1
  23. package/dist/chunks/{fx-B8hk1Fby.cjs → fx-lBGVtQO1.cjs} +2 -2
  24. package/dist/chunks/{fx-B8hk1Fby.cjs.map → fx-lBGVtQO1.cjs.map} +1 -1
  25. package/dist/chunks/presets-BYBVJVeP.js +226 -0
  26. package/dist/chunks/presets-BYBVJVeP.js.map +1 -0
  27. package/dist/chunks/presets-CUHys3sK.cjs +233 -0
  28. package/dist/chunks/presets-CUHys3sK.cjs.map +1 -0
  29. package/dist/chunks/{spring-CckMe3x0.js → spring-DfQO5USi.js} +2 -2
  30. package/dist/chunks/{spring-CckMe3x0.js.map → spring-DfQO5USi.js.map} +1 -1
  31. package/dist/chunks/{spring--oZh55tB.cjs → spring-Dgx187Vh.cjs} +2 -2
  32. package/dist/chunks/{spring--oZh55tB.cjs.map → spring-Dgx187Vh.cjs.map} +1 -1
  33. package/dist/chunks/{stagger-CLc3j58T.cjs → stagger-CCFyhzSw.cjs} +3 -3
  34. package/dist/chunks/stagger-CCFyhzSw.cjs.map +1 -0
  35. package/dist/chunks/{stagger-BFAhKknX.js → stagger-DtMKo2SK.js} +3 -3
  36. package/dist/chunks/stagger-DtMKo2SK.js.map +1 -0
  37. package/dist/chunks/{variants-DxPmgrNX.cjs → variants-BhjyddG8.cjs} +2 -2
  38. package/dist/chunks/{variants-DxPmgrNX.cjs.map → variants-BhjyddG8.cjs.map} +1 -1
  39. package/dist/chunks/{variants-Bsevy6Xm.js → variants-VNscPeTD.js} +2 -2
  40. package/dist/chunks/{variants-Bsevy6Xm.js.map → variants-VNscPeTD.js.map} +1 -1
  41. package/dist/components/a11y.cjs +4 -4
  42. package/dist/components/a11y.cjs.map +1 -1
  43. package/dist/components/a11y.d.cts +2 -2
  44. package/dist/components/a11y.d.ts +2 -2
  45. package/dist/components/a11y.js +5 -5
  46. package/dist/components/a11y.js.map +1 -1
  47. package/dist/components/angular.cjs +8 -8
  48. package/dist/components/angular.cjs.map +1 -1
  49. package/dist/components/angular.d.cts +22 -22
  50. package/dist/components/angular.d.ts +22 -22
  51. package/dist/components/angular.js +8 -8
  52. package/dist/components/angular.js.map +1 -1
  53. package/dist/components/background.cjs +3 -3
  54. package/dist/components/background.cjs.map +1 -1
  55. package/dist/components/background.css +1 -1
  56. package/dist/components/background.d.cts +1 -1
  57. package/dist/components/background.d.ts +1 -1
  58. package/dist/components/background.js +3 -3
  59. package/dist/components/background.js.map +1 -1
  60. package/dist/components/bridge.cjs +2 -2
  61. package/dist/components/bridge.cjs.map +1 -1
  62. package/dist/components/bridge.d.cts +1 -1
  63. package/dist/components/bridge.d.ts +1 -1
  64. package/dist/components/bridge.js +2 -2
  65. package/dist/components/bridge.js.map +1 -1
  66. package/dist/components/cards.cjs +3 -3
  67. package/dist/components/cards.cjs.map +1 -1
  68. package/dist/components/cards.css +1 -1
  69. package/dist/components/cards.d.cts +1 -1
  70. package/dist/components/cards.d.ts +1 -1
  71. package/dist/components/cards.js +3 -3
  72. package/dist/components/cards.js.map +1 -1
  73. package/dist/components/click.cjs +4 -4
  74. package/dist/components/click.cjs.map +1 -1
  75. package/dist/components/click.css +1 -1
  76. package/dist/components/click.d.cts +1 -1
  77. package/dist/components/click.d.ts +1 -1
  78. package/dist/components/click.js +4 -4
  79. package/dist/components/click.js.map +1 -1
  80. package/dist/components/depth.cjs +4 -4
  81. package/dist/components/depth.cjs.map +1 -1
  82. package/dist/components/depth.css +1 -1
  83. package/dist/components/depth.d.cts +1 -1
  84. package/dist/components/depth.d.ts +1 -1
  85. package/dist/components/depth.js +4 -4
  86. package/dist/components/depth.js.map +1 -1
  87. package/dist/components/effects.cjs +13 -13
  88. package/dist/components/effects.cjs.map +1 -1
  89. package/dist/components/effects.d.cts +2 -2
  90. package/dist/components/effects.d.ts +2 -2
  91. package/dist/components/effects.js +13 -13
  92. package/dist/components/effects.js.map +1 -1
  93. package/dist/components/feedback.cjs +2 -2
  94. package/dist/components/feedback.cjs.map +1 -1
  95. package/dist/components/feedback.css +1 -1
  96. package/dist/components/feedback.d.cts +1 -1
  97. package/dist/components/feedback.d.ts +1 -1
  98. package/dist/components/feedback.js +2 -2
  99. package/dist/components/feedback.js.map +1 -1
  100. package/dist/components/fx.cjs +10 -10
  101. package/dist/components/fx.cjs.map +1 -1
  102. package/dist/components/fx.css +1 -1
  103. package/dist/components/fx.d.cts +2 -2
  104. package/dist/components/fx.d.ts +2 -2
  105. package/dist/components/fx.js +10 -10
  106. package/dist/components/fx.js.map +1 -1
  107. package/dist/components/gesture.cjs +4 -4
  108. package/dist/components/gesture.cjs.map +1 -1
  109. package/dist/components/gesture.css +1 -1
  110. package/dist/components/gesture.d.cts +1 -1
  111. package/dist/components/gesture.d.ts +1 -1
  112. package/dist/components/gesture.js +5 -5
  113. package/dist/components/gesture.js.map +1 -1
  114. package/dist/components/interaction.cjs +2 -2
  115. package/dist/components/interaction.cjs.map +1 -1
  116. package/dist/components/interaction.css +1 -1
  117. package/dist/components/interaction.d.cts +1 -1
  118. package/dist/components/interaction.d.ts +1 -1
  119. package/dist/components/interaction.js +2 -2
  120. package/dist/components/interaction.js.map +1 -1
  121. package/dist/components/jsx.d.cts +2 -2
  122. package/dist/components/jsx.d.ts +2 -2
  123. package/dist/components/layout.cjs +2 -2
  124. package/dist/components/layout.cjs.map +1 -1
  125. package/dist/components/layout.css +1 -1
  126. package/dist/components/layout.d.cts +1 -1
  127. package/dist/components/layout.d.ts +1 -1
  128. package/dist/components/layout.js +2 -2
  129. package/dist/components/layout.js.map +1 -1
  130. package/dist/components/lazy.cjs +2 -2
  131. package/dist/components/lazy.cjs.map +1 -1
  132. package/dist/components/lazy.d.cts +2 -2
  133. package/dist/components/lazy.d.ts +2 -2
  134. package/dist/components/lazy.js +2 -2
  135. package/dist/components/lazy.js.map +1 -1
  136. package/dist/components/lite.cjs +45 -41
  137. package/dist/components/lite.cjs.map +1 -1
  138. package/dist/components/lite.js +45 -41
  139. package/dist/components/lite.js.map +1 -1
  140. package/dist/components/packs.cjs +2 -2
  141. package/dist/components/packs.cjs.map +1 -1
  142. package/dist/components/packs.css +1 -1
  143. package/dist/components/packs.d.cts +1 -1
  144. package/dist/components/packs.d.ts +1 -1
  145. package/dist/components/packs.js +2 -2
  146. package/dist/components/packs.js.map +1 -1
  147. package/dist/components/page.cjs +3 -3
  148. package/dist/components/page.cjs.map +1 -1
  149. package/dist/components/page.css +1 -1
  150. package/dist/components/page.d.cts +1 -1
  151. package/dist/components/page.d.ts +1 -1
  152. package/dist/components/page.js +4 -4
  153. package/dist/components/page.js.map +1 -1
  154. package/dist/components/perf.cjs +3 -3
  155. package/dist/components/perf.cjs.map +1 -1
  156. package/dist/components/perf.d.cts +2 -2
  157. package/dist/components/perf.d.ts +2 -2
  158. package/dist/components/perf.js +4 -4
  159. package/dist/components/perf.js.map +1 -1
  160. package/dist/components/physics.cjs +3 -3
  161. package/dist/components/physics.cjs.map +1 -1
  162. package/dist/components/physics.css +1 -1
  163. package/dist/components/physics.d.cts +1 -1
  164. package/dist/components/physics.d.ts +1 -1
  165. package/dist/components/physics.js +4 -4
  166. package/dist/components/physics.js.map +1 -1
  167. package/dist/components/react.cjs +4 -4
  168. package/dist/components/react.cjs.map +1 -1
  169. package/dist/components/react.js +4 -4
  170. package/dist/components/react.js.map +1 -1
  171. package/dist/components/reveal.cjs +6 -2
  172. package/dist/components/reveal.cjs.map +1 -1
  173. package/dist/components/reveal.css +1 -1
  174. package/dist/components/reveal.d.cts +1 -1
  175. package/dist/components/reveal.d.ts +1 -1
  176. package/dist/components/reveal.js +6 -2
  177. package/dist/components/reveal.js.map +1 -1
  178. package/dist/components/solid.cjs +9 -9
  179. package/dist/components/solid.cjs.map +1 -1
  180. package/dist/components/solid.d.cts +22 -22
  181. package/dist/components/solid.d.ts +22 -22
  182. package/dist/components/solid.js +9 -9
  183. package/dist/components/solid.js.map +1 -1
  184. package/dist/components/svelte.cjs +8 -8
  185. package/dist/components/svelte.cjs.map +1 -1
  186. package/dist/components/svelte.d.cts +22 -22
  187. package/dist/components/svelte.d.ts +22 -22
  188. package/dist/components/svelte.js +8 -8
  189. package/dist/components/svelte.js.map +1 -1
  190. package/dist/components/svg.cjs +2 -2
  191. package/dist/components/svg.cjs.map +1 -1
  192. package/dist/components/svg.css +1 -1
  193. package/dist/components/svg.d.cts +1 -1
  194. package/dist/components/svg.d.ts +1 -1
  195. package/dist/components/svg.js +2 -2
  196. package/dist/components/svg.js.map +1 -1
  197. package/dist/components/text.cjs +3 -3
  198. package/dist/components/text.cjs.map +1 -1
  199. package/dist/components/text.css +1 -1
  200. package/dist/components/text.d.cts +1 -1
  201. package/dist/components/text.d.ts +1 -1
  202. package/dist/components/text.js +3 -3
  203. package/dist/components/text.js.map +1 -1
  204. package/dist/components/timeline.cjs +3 -3
  205. package/dist/components/timeline.cjs.map +1 -1
  206. package/dist/components/timeline.css +1 -1
  207. package/dist/components/timeline.d.cts +1 -1
  208. package/dist/components/timeline.d.ts +1 -1
  209. package/dist/components/timeline.js +4 -4
  210. package/dist/components/timeline.js.map +1 -1
  211. package/dist/components/tokens.cjs +2 -2
  212. package/dist/components/tokens.cjs.map +1 -1
  213. package/dist/components/tokens.d.cts +2 -2
  214. package/dist/components/tokens.d.ts +2 -2
  215. package/dist/components/tokens.js +2 -2
  216. package/dist/components/tokens.js.map +1 -1
  217. package/dist/components/transitions.cjs +2 -2
  218. package/dist/components/transitions.cjs.map +1 -1
  219. package/dist/components/transitions.css +1 -1
  220. package/dist/components/transitions.d.cts +1 -1
  221. package/dist/components/transitions.d.ts +1 -1
  222. package/dist/components/transitions.js +2 -2
  223. package/dist/components/transitions.js.map +1 -1
  224. package/dist/components/ui.cjs +4 -4
  225. package/dist/components/ui.cjs.map +1 -1
  226. package/dist/components/ui.css +1 -1
  227. package/dist/components/ui.d.cts +1 -1
  228. package/dist/components/ui.d.ts +1 -1
  229. package/dist/components/ui.js +5 -5
  230. package/dist/components/ui.js.map +1 -1
  231. package/dist/components/vue.cjs +9 -9
  232. package/dist/components/vue.cjs.map +1 -1
  233. package/dist/components/vue.d.cts +23 -23
  234. package/dist/components/vue.d.ts +23 -23
  235. package/dist/components/vue.js +9 -9
  236. package/dist/components/vue.js.map +1 -1
  237. package/dist/components/webgl.cjs +2 -2
  238. package/dist/components/webgl.cjs.map +1 -1
  239. package/dist/components/webgl.css +1 -1
  240. package/dist/components/webgl.d.cts +1 -1
  241. package/dist/components/webgl.d.ts +1 -1
  242. package/dist/components/webgl.js +2 -2
  243. package/dist/components/webgl.js.map +1 -1
  244. package/dist/components.cjs +9 -9
  245. package/dist/components.cjs.map +1 -1
  246. package/dist/components.css +1 -1
  247. package/dist/components.d.cts +30 -30
  248. package/dist/components.d.ts +30 -30
  249. package/dist/components.js +11 -11
  250. package/dist/components.js.map +1 -1
  251. package/dist/components.umd.js +5 -5
  252. package/dist/components.umd.js.map +1 -1
  253. package/dist/element.cjs +4 -3
  254. package/dist/element.cjs.map +1 -1
  255. package/dist/element.d.cts +19 -5
  256. package/dist/element.d.ts +19 -5
  257. package/dist/element.js +4 -3
  258. package/dist/element.js.map +1 -1
  259. package/dist/element.umd.js +1 -1
  260. package/dist/element.umd.js.map +1 -1
  261. package/dist/index.cjs +28 -25
  262. package/dist/index.cjs.map +1 -1
  263. package/dist/index.d.cts +40 -15
  264. package/dist/index.d.ts +40 -15
  265. package/dist/index.js +11 -10
  266. package/dist/index.js.map +1 -1
  267. package/dist/index.umd.js +5 -5
  268. package/dist/index.umd.js.map +1 -1
  269. package/dist/presets/extended.cjs +243 -0
  270. package/dist/presets/extended.cjs.map +1 -0
  271. package/dist/presets/extended.d.cts +37 -0
  272. package/dist/presets/extended.d.ts +37 -0
  273. package/dist/presets/extended.js +239 -0
  274. package/dist/presets/extended.js.map +1 -0
  275. package/dist/presets-extended.umd.js +2 -0
  276. package/dist/presets-extended.umd.js.map +1 -0
  277. package/dist/react.cjs +4 -3
  278. package/dist/react.cjs.map +1 -1
  279. package/dist/react.d.cts +19 -5
  280. package/dist/react.d.ts +19 -5
  281. package/dist/react.js +4 -3
  282. package/dist/react.js.map +1 -1
  283. package/dist/solid.cjs +5 -4
  284. package/dist/solid.cjs.map +1 -1
  285. package/dist/solid.d.cts +20 -6
  286. package/dist/solid.d.ts +20 -6
  287. package/dist/solid.js +5 -4
  288. package/dist/solid.js.map +1 -1
  289. package/dist/svelte.cjs +5 -4
  290. package/dist/svelte.cjs.map +1 -1
  291. package/dist/svelte.d.cts +20 -6
  292. package/dist/svelte.d.ts +20 -6
  293. package/dist/svelte.js +5 -4
  294. package/dist/svelte.js.map +1 -1
  295. package/dist/vue.cjs +4 -3
  296. package/dist/vue.cjs.map +1 -1
  297. package/dist/vue.d.cts +19 -5
  298. package/dist/vue.d.ts +19 -5
  299. package/dist/vue.js +4 -3
  300. package/dist/vue.js.map +1 -1
  301. package/docs/API.md +17 -12
  302. package/docs/ROADMAP.md +12 -11
  303. package/docs/accessibility.md +2 -2
  304. package/docs/components.md +33 -33
  305. package/docs/frameworks-ssr.md +12 -12
  306. package/docs/hybrid-apps.md +10 -10
  307. package/docs/migration-from-aos.md +5 -5
  308. package/docs/migration-from-gsap-scrolltrigger.md +3 -3
  309. package/docs/motion-tokens.css +1 -1
  310. package/docs/motion-tokens.md +2 -2
  311. package/docs/performance.md +6 -6
  312. package/docs/presets.md +310 -0
  313. package/docs/windows-apps.md +8 -8
  314. package/package.json +40 -26
  315. package/dist/chunks/base-B5i8qQPR.cjs.map +0 -1
  316. package/dist/chunks/base-C3Sw9sAO.js.map +0 -1
  317. package/dist/chunks/core-mV_TPgG_.js.map +0 -1
  318. package/dist/chunks/core-qpECfEkb.cjs.map +0 -1
  319. package/dist/chunks/stagger-BFAhKknX.js.map +0 -1
  320. package/dist/chunks/stagger-CLc3j58T.cjs.map +0 -1
package/dist/index.d.cts CHANGED
@@ -1,9 +1,15 @@
1
1
  /**
2
- * use-scroll-animate - Core Type Definitions
2
+ * motionary - 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 `motionary/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 (`motionary/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 */
@@ -173,7 +189,7 @@ interface ScrollAnimateInstance {
173
189
  }
174
190
 
175
191
  /**
176
- * use-scroll-animate - Core Implementation
192
+ * motionary - Core Implementation
177
193
  * Uses IntersectionObserver + Web Animations API for zero-dependency,
178
194
  * high-performance scroll-triggered animations.
179
195
  */
@@ -193,7 +209,7 @@ declare function getScrollProgress(el: Element, root?: Element | null): number;
193
209
  declare function createScrollAnimate(userConfig?: ScrollAnimateConfig): ScrollAnimateInstance;
194
210
 
195
211
  /**
196
- * use-scroll-animate - Staggered children
212
+ * motionary - Staggered children
197
213
  * Reveal a container's children one after another when the container scrolls
198
214
  * into view, optionally also animating children that are added later.
199
215
  */
@@ -324,7 +340,7 @@ declare function resolvePosition(pos: TimelinePosition | undefined, end: number,
324
340
  declare function timeline(options?: TimelineOptions): Timeline;
325
341
 
326
342
  /**
327
- * use-scroll-animate - parallax() helper
343
+ * motionary - parallax() helper
328
344
  *
329
345
  * Moves elements at a different speed than the page while they cross the
330
346
  * viewport. Built on the same scroll progress as `progressVar` (0 when the
@@ -365,15 +381,24 @@ interface ParallaxHelperOptions {
365
381
  declare function parallax(target: string | Element | NodeList | Element[], options?: ParallaxHelperOptions): () => void;
366
382
 
367
383
  /**
368
- * use-scroll-animate - Animation Presets
384
+ * motionary - Animation Presets
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
+ * `motionary/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>;
@@ -385,7 +410,7 @@ declare function resolveEasing(easing: EasingType): string;
385
410
  *
386
411
  * @example
387
412
  * ```js
388
- * import ScrollAnimate from 'use-scroll-animate';
413
+ * import ScrollAnimate from 'motionary';
389
414
  *
390
415
  * // Auto-initialize all elements with data-sa attribute
391
416
  * ScrollAnimate.init();
@@ -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.d.ts CHANGED
@@ -1,9 +1,15 @@
1
1
  /**
2
- * use-scroll-animate - Core Type Definitions
2
+ * motionary - 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 `motionary/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 (`motionary/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 */
@@ -173,7 +189,7 @@ interface ScrollAnimateInstance {
173
189
  }
174
190
 
175
191
  /**
176
- * use-scroll-animate - Core Implementation
192
+ * motionary - Core Implementation
177
193
  * Uses IntersectionObserver + Web Animations API for zero-dependency,
178
194
  * high-performance scroll-triggered animations.
179
195
  */
@@ -193,7 +209,7 @@ declare function getScrollProgress(el: Element, root?: Element | null): number;
193
209
  declare function createScrollAnimate(userConfig?: ScrollAnimateConfig): ScrollAnimateInstance;
194
210
 
195
211
  /**
196
- * use-scroll-animate - Staggered children
212
+ * motionary - Staggered children
197
213
  * Reveal a container's children one after another when the container scrolls
198
214
  * into view, optionally also animating children that are added later.
199
215
  */
@@ -324,7 +340,7 @@ declare function resolvePosition(pos: TimelinePosition | undefined, end: number,
324
340
  declare function timeline(options?: TimelineOptions): Timeline;
325
341
 
326
342
  /**
327
- * use-scroll-animate - parallax() helper
343
+ * motionary - parallax() helper
328
344
  *
329
345
  * Moves elements at a different speed than the page while they cross the
330
346
  * viewport. Built on the same scroll progress as `progressVar` (0 when the
@@ -365,15 +381,24 @@ interface ParallaxHelperOptions {
365
381
  declare function parallax(target: string | Element | NodeList | Element[], options?: ParallaxHelperOptions): () => void;
366
382
 
367
383
  /**
368
- * use-scroll-animate - Animation Presets
384
+ * motionary - Animation Presets
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
+ * `motionary/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>;
@@ -385,7 +410,7 @@ declare function resolveEasing(easing: EasingType): string;
385
410
  *
386
411
  * @example
387
412
  * ```js
388
- * import ScrollAnimate from 'use-scroll-animate';
413
+ * import ScrollAnimate from 'motionary';
389
414
  *
390
415
  * // Auto-initialize all elements with data-sa attribute
391
416
  * ScrollAnimate.init();
@@ -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,12 +1,13 @@
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';
4
- export { T as TIMELINE_PRESETS, r as resolvePosition, s as supportsNativeScrub, t as timeline } from './chunks/core-DN3hHbHh.js';
5
- import './chunks/base-C3Sw9sAO.js';
1
+ import { b as resolveTargets, h as hasDOM, s as supportsObserver, g as getScrollProgress, d as prefersReducedMotion, c as createScrollAnimate } from './chunks/core-D7cVumUu.js';
2
+ export { e as supportsScrollTimeline } from './chunks/core-D7cVumUu.js';
3
+ export { s as staggerChildren } from './chunks/stagger-DtMKo2SK.js';
4
+ export { T as TIMELINE_PRESETS, r as resolvePosition, s as supportsNativeScrub, t as timeline } from './chunks/core-CUGCsMsJ.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-BYBVJVeP.js';
6
+ import './chunks/base-Yno7N2eC.js';
6
7
  import './components/tokens.js';
7
8
 
8
9
  /**
9
- * use-scroll-animate - parallax() helper
10
+ * motionary - parallax() helper
10
11
  *
11
12
  * Moves elements at a different speed than the page while they cross the
12
13
  * viewport. Built on the same scroll progress as `progressVar` (0 when the
@@ -98,16 +99,16 @@ function parallax(target, options = {}) {
98
99
  }
99
100
 
100
101
  /**
101
- * use-scroll-animate
102
+ * motionary
102
103
  *
103
104
  * A lightweight, dependency-free scroll animation library for modern web
104
105
  * applications. Built with TypeScript, powered by IntersectionObserver and
105
106
  * the Web Animations API (or the native scroll-driven timeline). Safe to
106
107
  * import during SSR. Framework integrations live in the subpath entries:
107
- * `use-scroll-animate/react`, `/vue`, `/svelte`, `/solid`, `/element`.
108
+ * `motionary/react`, `/vue`, `/svelte`, `/solid`, `/element`.
108
109
  *
109
110
  * @license MIT
110
- * @see https://github.com/HarrisonCN/use-scroll-animate
111
+ * @see https://github.com/HarrisonCN/motionary
111
112
  */
112
113
  /**
113
114
  * Default singleton instance of ScrollAnimate.
@@ -115,7 +116,7 @@ function parallax(target, options = {}) {
115
116
  *
116
117
  * @example
117
118
  * ```js
118
- * import ScrollAnimate from 'use-scroll-animate';
119
+ * import ScrollAnimate from 'motionary';
119
120
  *
120
121
  * // Auto-initialize all elements with data-sa attribute
121
122
  * ScrollAnimate.init();
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 * motionary - 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 * motionary\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 * `motionary/react`, `/vue`, `/svelte`, `/solid`, `/element`.\n *\n * @license MIT\n * @see https://github.com/HarrisonCN/motionary\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 'motionary';\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,15 +1,15 @@
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
- * use-scroll-animate
3
+ * motionary
4
4
  *
5
5
  * A lightweight, dependency-free scroll animation library for modern web
6
6
  * applications. Built with TypeScript, powered by IntersectionObserver and
7
7
  * the Web Animations API (or the native scroll-driven timeline). Safe to
8
8
  * import during SSR. Framework integrations live in the subpath entries:
9
- * `use-scroll-animate/react`, `/vue`, `/svelte`, `/solid`, `/element`.
9
+ * `motionary/react`, `/vue`, `/svelte`, `/solid`, `/element`.
10
10
  *
11
11
  * @license MIT
12
- * @see https://github.com/HarrisonCN/use-scroll-animate
12
+ * @see https://github.com/HarrisonCN/motionary
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