use-scroll-animate 1.5.0 → 2.0.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 (66) hide show
  1. package/CHANGELOG.md +67 -0
  2. package/README.md +145 -10
  3. package/README_ja.md +57 -1
  4. package/README_zh.md +68 -1
  5. package/dist/{index.esm.js → chunks/core-BP-a1iNc.js} +297 -404
  6. package/dist/chunks/core-BP-a1iNc.js.map +1 -0
  7. package/dist/{index.mjs → chunks/core-B_J4rXbC.cjs} +312 -404
  8. package/dist/chunks/core-B_J4rXbC.cjs.map +1 -0
  9. package/dist/chunks/stagger-DHw0ExuR.cjs +86 -0
  10. package/dist/chunks/stagger-DHw0ExuR.cjs.map +1 -0
  11. package/dist/chunks/stagger-DTv_WiUQ.js +84 -0
  12. package/dist/chunks/stagger-DTv_WiUQ.js.map +1 -0
  13. package/dist/element.cjs +97 -0
  14. package/dist/element.cjs.map +1 -0
  15. package/dist/{types/types.d.ts → element.d.cts} +73 -10
  16. package/dist/element.d.ts +216 -0
  17. package/dist/element.js +95 -0
  18. package/dist/element.js.map +1 -0
  19. package/dist/element.umd.js +2 -0
  20. package/dist/element.umd.js.map +1 -0
  21. package/dist/index.cjs +241 -0
  22. package/dist/index.cjs.map +1 -0
  23. package/dist/{index.d.mts → index.d.cts} +84 -51
  24. package/dist/index.d.ts +84 -51
  25. package/dist/index.js +98 -1133
  26. package/dist/index.js.map +1 -1
  27. package/dist/index.umd.js +5 -3
  28. package/dist/index.umd.js.map +1 -1
  29. package/dist/react.cjs +67 -0
  30. package/dist/react.cjs.map +1 -0
  31. package/dist/react.d.cts +159 -0
  32. package/dist/react.d.ts +159 -0
  33. package/dist/react.js +64 -0
  34. package/dist/react.js.map +1 -0
  35. package/dist/solid.cjs +62 -0
  36. package/dist/solid.cjs.map +1 -0
  37. package/dist/solid.d.cts +245 -0
  38. package/dist/solid.d.ts +245 -0
  39. package/dist/solid.js +58 -0
  40. package/dist/solid.js.map +1 -0
  41. package/dist/svelte.cjs +65 -0
  42. package/dist/svelte.cjs.map +1 -0
  43. package/dist/svelte.d.cts +244 -0
  44. package/dist/svelte.d.ts +244 -0
  45. package/dist/svelte.js +62 -0
  46. package/dist/svelte.js.map +1 -0
  47. package/dist/vue.cjs +61 -0
  48. package/dist/vue.cjs.map +1 -0
  49. package/dist/vue.d.cts +159 -0
  50. package/dist/vue.d.ts +159 -0
  51. package/dist/vue.js +59 -0
  52. package/dist/vue.js.map +1 -0
  53. package/docs/API.md +139 -0
  54. package/docs/deprecations.md +20 -0
  55. package/docs/migration-from-aos.md +67 -0
  56. package/docs/migration-from-gsap-scrolltrigger.md +80 -0
  57. package/package.json +86 -15
  58. package/dist/index.esm.js.map +0 -1
  59. package/dist/index.mjs.map +0 -1
  60. package/dist/types/core.d.ts +0 -41
  61. package/dist/types/index.d.ts +0 -36
  62. package/dist/types/presets.d.ts +0 -15
  63. package/dist/types/react.d.ts +0 -29
  64. package/dist/types/sequence.d.ts +0 -38
  65. package/dist/types/stagger.d.ts +0 -25
  66. package/dist/types/vue.d.ts +0 -28
package/dist/index.js CHANGED
@@ -1,1009 +1,6 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- /**
6
- * use-scroll-animate - Animation Presets
7
- * Defines keyframes for all built-in animation presets
8
- */
9
- const PRESETS = {
10
- 'fade-in': {
11
- from: { opacity: 0 },
12
- to: { opacity: 1 },
13
- },
14
- 'fade-in-up': {
15
- from: { opacity: 0, transform: 'translateY(40px)' },
16
- to: { opacity: 1, transform: 'translateY(0px)' },
17
- },
18
- 'fade-in-down': {
19
- from: { opacity: 0, transform: 'translateY(-40px)' },
20
- to: { opacity: 1, transform: 'translateY(0px)' },
21
- },
22
- 'fade-in-left': {
23
- from: { opacity: 0, transform: 'translateX(-40px)' },
24
- to: { opacity: 1, transform: 'translateX(0px)' },
25
- },
26
- 'fade-in-right': {
27
- from: { opacity: 0, transform: 'translateX(40px)' },
28
- to: { opacity: 1, transform: 'translateX(0px)' },
29
- },
30
- 'zoom-in': {
31
- from: { opacity: 0, transform: 'scale(0.8)' },
32
- to: { opacity: 1, transform: 'scale(1)' },
33
- },
34
- 'zoom-out': {
35
- from: { opacity: 0, transform: 'scale(1.2)' },
36
- to: { opacity: 1, transform: 'scale(1)' },
37
- },
38
- 'flip-x': {
39
- from: { opacity: 0, transform: 'rotateX(-90deg)' },
40
- to: { opacity: 1, transform: 'rotateX(0deg)' },
41
- },
42
- 'flip-y': {
43
- from: { opacity: 0, transform: 'rotateY(-90deg)' },
44
- to: { opacity: 1, transform: 'rotateY(0deg)' },
45
- },
46
- 'slide-up': {
47
- from: { transform: 'translateY(100%)' },
48
- to: { transform: 'translateY(0px)' },
49
- },
50
- 'slide-down': {
51
- from: { transform: 'translateY(-100%)' },
52
- to: { transform: 'translateY(0px)' },
53
- },
54
- 'slide-left': {
55
- from: { transform: 'translateX(-100%)' },
56
- to: { transform: 'translateX(0px)' },
57
- },
58
- 'slide-right': {
59
- from: { transform: 'translateX(100%)' },
60
- to: { transform: 'translateX(0px)' },
61
- },
62
- 'bounce': {
63
- from: { opacity: 0, transform: 'translateY(-60px)' },
64
- to: { opacity: 1, transform: 'translateY(0px)' },
65
- },
66
- 'rotate-in': {
67
- from: { opacity: 0, transform: 'rotate(-180deg) scale(0.5)' },
68
- to: { opacity: 1, transform: 'rotate(0deg) scale(1)' },
69
- },
70
- 'blur-in': {
71
- from: { opacity: 0, filter: 'blur(12px)' },
72
- to: { opacity: 1, filter: 'blur(0px)' },
73
- },
74
- 'skew-in': {
75
- from: { opacity: 0, transform: 'skewX(20deg) translateX(30px)' },
76
- to: { opacity: 1, transform: 'skewX(0deg) translateX(0px)' },
77
- },
78
- 'scale-x': {
79
- from: { transform: 'scaleX(0)' },
80
- to: { transform: 'scaleX(1)' },
81
- },
82
- 'scale-y': {
83
- from: { transform: 'scaleY(0)' },
84
- to: { transform: 'scaleY(1)' },
85
- },
86
- 'shimmer': {
87
- from: { opacity: 0.5, filter: 'brightness(1)' },
88
- to: { opacity: 1, filter: 'brightness(1.5)' },
89
- },
90
- 'pulse': {
91
- from: { transform: 'scale(1)' },
92
- to: { transform: 'scale(1.05)' },
93
- },
94
- 'swing': {
95
- from: { transform: 'rotate(-10deg)' },
96
- to: { transform: 'rotate(10deg)' },
97
- },
98
- 'scale-up': {
99
- from: { opacity: 0, transform: 'scale(0.5)' },
100
- to: { opacity: 1, transform: 'scale(1)' },
101
- },
102
- 'blur-in-up': {
103
- from: { opacity: 0, filter: 'blur(12px)', transform: 'translateY(40px)' },
104
- to: { opacity: 1, filter: 'blur(0px)', transform: 'translateY(0px)' },
105
- },
106
- 'flip-up': {
107
- from: { opacity: 0, transform: 'perspective(800px) rotateX(60deg)' },
108
- to: { opacity: 1, transform: 'perspective(800px) rotateX(0deg)' },
109
- },
110
- 'flip-down': {
111
- from: { opacity: 0, transform: 'perspective(800px) rotateX(-60deg)' },
112
- to: { opacity: 1, transform: 'perspective(800px) rotateX(0deg)' },
113
- },
114
- 'rotate-left': {
115
- from: { opacity: 0, transform: 'rotate(-15deg) translateX(-40px)' },
116
- to: { opacity: 1, transform: 'rotate(0deg) translateX(0px)' },
117
- },
118
- 'rotate-right': {
119
- from: { opacity: 0, transform: 'rotate(15deg) translateX(40px)' },
120
- to: { opacity: 1, transform: 'rotate(0deg) translateX(0px)' },
121
- },
122
- // clip-path reveals: content is uncovered without moving or fading
123
- 'clip-up': {
124
- from: { clipPath: 'inset(100% 0% 0% 0%)' },
125
- to: { clipPath: 'inset(0% 0% 0% 0%)' },
126
- },
127
- 'clip-down': {
128
- from: { clipPath: 'inset(0% 0% 100% 0%)' },
129
- to: { clipPath: 'inset(0% 0% 0% 0%)' },
130
- },
131
- 'clip-left': {
132
- from: { clipPath: 'inset(0% 0% 0% 100%)' },
133
- to: { clipPath: 'inset(0% 0% 0% 0%)' },
134
- },
135
- 'clip-right': {
136
- from: { clipPath: 'inset(0% 100% 0% 0%)' },
137
- to: { clipPath: 'inset(0% 0% 0% 0%)' },
138
- },
139
- 'clip-circle': {
140
- from: { clipPath: 'circle(0% at 50% 50%)' },
141
- to: { clipPath: 'circle(75% at 50% 50%)' },
142
- },
143
- };
144
- function resolvePreset(animation) {
145
- var _a;
146
- if (typeof animation === 'string') {
147
- return (_a = PRESETS[animation.trim()]) !== null && _a !== void 0 ? _a : PRESETS['fade-in-up'];
148
- }
149
- if (Array.isArray(animation)) {
150
- const combined = { from: {}, to: {} };
151
- animation.forEach(name => {
152
- const preset = PRESETS[name.trim()];
153
- if (preset) {
154
- Object.entries(preset.from).forEach(([key, val]) => {
155
- if (key === 'transform' && combined.from[key]) {
156
- combined.from[key] = `${combined.from[key]} ${val}`;
157
- }
158
- else {
159
- combined.from[key] = val;
160
- }
161
- });
162
- Object.entries(preset.to).forEach(([key, val]) => {
163
- if (key === 'transform' && combined.to[key]) {
164
- combined.to[key] = `${combined.to[key]} ${val}`;
165
- }
166
- else {
167
- combined.to[key] = val;
168
- }
169
- });
170
- }
171
- });
172
- return combined;
173
- }
174
- return animation;
175
- }
176
- /** Easing to CSS cubic-bezier mapping */
177
- const EASING_MAP = {
178
- linear: 'linear',
179
- ease: 'ease',
180
- 'ease-in': 'ease-in',
181
- 'ease-out': 'ease-out',
182
- 'ease-in-out': 'ease-in-out',
183
- spring: 'cubic-bezier(0.34, 1.56, 0.64, 1)',
184
- 'soft-spring': 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',
185
- 'heavy-bounce': 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
186
- };
187
- function resolveEasing(easing) {
188
- var _a;
189
- if (typeof easing === 'string') {
190
- return (_a = EASING_MAP[easing]) !== null && _a !== void 0 ? _a : easing;
191
- }
192
- if (Array.isArray(easing)) {
193
- return `cubic-bezier(${easing.join(', ')})`;
194
- }
195
- if (typeof easing === 'function') {
196
- // Functions cannot be expressed as a CSS easing string; the core samples
197
- // them into a `linear()` easing (or keyframes on older browsers).
198
- return 'linear';
199
- }
200
- return 'ease';
201
- }
202
-
203
- /**
204
- * use-scroll-animate - Core Implementation
205
- * Uses IntersectionObserver + Web Animations API for zero-dependency,
206
- * high-performance scroll-triggered animations.
207
- */
208
- const DEFAULT_CONFIG = {
209
- defaultAnimation: 'fade-in-up',
210
- defaultDuration: 600,
211
- defaultDelay: 0,
212
- defaultEasing: 'ease',
213
- defaultThreshold: 0.1,
214
- defaultRootMargin: '0px',
215
- defaultRepeat: false,
216
- defaultOnce: true,
217
- defaultOffset: 0,
218
- hiddenClass: 'sa-hidden',
219
- visibleClass: 'sa-visible',
220
- useClassNames: false,
221
- disabled: false,
222
- root: null,
223
- autoUnregister: true,
224
- };
225
- const noop = () => undefined;
226
- /* ------------------------------------------------------------------ */
227
- /* Environment helpers (all SSR-safe: never touch globals at import) */
228
- /* ------------------------------------------------------------------ */
229
- const hasDOM = () => typeof window !== 'undefined' && typeof document !== 'undefined';
230
- /** @internal */
231
- const supportsObserver = () => hasDOM() && typeof IntersectionObserver !== 'undefined';
232
- let reducedMotionQuery;
233
- /** @internal Whether the user asked the OS/browser to reduce motion. */
234
- function prefersReducedMotion() {
235
- if (!hasDOM())
236
- return false;
237
- if (reducedMotionQuery === undefined) {
238
- reducedMotionQuery =
239
- typeof window.matchMedia === 'function' ? window.matchMedia('(prefers-reduced-motion: reduce)') : null;
240
- }
241
- return !!reducedMotionQuery && reducedMotionQuery.matches;
242
- }
243
- /* ------------------------------------------------------------------ */
244
- /* Option parsing */
245
- /* ------------------------------------------------------------------ */
246
- function num(value) {
247
- if (value === undefined || value.trim() === '')
248
- return undefined;
249
- const n = parseFloat(value);
250
- return Number.isFinite(n) ? n : undefined;
251
- }
252
- /** Numeric strings ("100") become numbers (px); strings with units stay as-is. */
253
- function lengthValue(value) {
254
- if (value === undefined || value.trim() === '')
255
- return undefined;
256
- const v = value.trim();
257
- return /^-?(\d+\.?\d*|\.\d+)$/.test(v) ? parseFloat(v) : v;
258
- }
259
- const DEFAULT_PROGRESS_VAR = '--sa-progress';
260
- /** `''` (bare attribute) -> default name; `sa-progress` -> `--sa-progress`. */
261
- function normalizeVar(name) {
262
- const v = name.trim();
263
- if (!v)
264
- return DEFAULT_PROGRESS_VAR;
265
- return v.startsWith('--') ? v : `--${v}`;
266
- }
267
- function parseDataAttributes(el, config) {
268
- var _a;
269
- const dataset = el.dataset || {};
270
- const opts = {};
271
- if (dataset.saAnimation) {
272
- const anim = dataset.saAnimation;
273
- opts.animation = (anim.includes(',') ? anim.split(',').map((s) => s.trim()) : anim.trim());
274
- }
275
- opts.duration = num(dataset.saDuration);
276
- opts.delay = num(dataset.saDelay);
277
- if (dataset.saEasing) {
278
- const e = dataset.saEasing.trim();
279
- if (e.startsWith('[')) {
280
- try {
281
- opts.easing = JSON.parse(e);
282
- }
283
- catch (_b) {
284
- // Malformed JSON: fall back to the default easing instead of throwing
285
- }
286
- }
287
- else {
288
- opts.easing = e;
289
- }
290
- }
291
- if (dataset.saThreshold) {
292
- const t = dataset.saThreshold;
293
- opts.threshold = t.includes(',')
294
- ? t.split(',').map(parseFloat).filter(Number.isFinite)
295
- : num(t);
296
- }
297
- if (dataset.saRootMargin)
298
- opts.rootMargin = dataset.saRootMargin;
299
- if (dataset.saRepeat !== undefined)
300
- opts.repeat = dataset.saRepeat !== 'false';
301
- if (dataset.saOnce !== undefined)
302
- opts.once = dataset.saOnce !== 'false';
303
- opts.offset = num(dataset.saOffset);
304
- opts.stagger = num(dataset.saStagger);
305
- if (dataset.saProgressVar !== undefined)
306
- opts.progressVar = normalizeVar(dataset.saProgressVar);
307
- if (dataset.saProgress)
308
- opts.progressMode = dataset.saProgress.trim() === 'scroll' ? 'scroll' : 'ratio';
309
- if (dataset.saParallaxX || dataset.saParallaxY || dataset.saParallaxRotate || dataset.saParallaxScale) {
310
- opts.parallax = {
311
- x: lengthValue(dataset.saParallaxX),
312
- y: lengthValue(dataset.saParallaxY),
313
- rotate: num(dataset.saParallaxRotate),
314
- scale: num(dataset.saParallaxScale),
315
- speed: (_a = num(dataset.saParallaxSpeed)) !== null && _a !== void 0 ? _a : 1,
316
- };
317
- }
318
- return mergeOptions(opts, config);
319
- }
320
- function mergeOptions(opts, config) {
321
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
322
- const repeat = (_a = opts.repeat) !== null && _a !== void 0 ? _a : config.defaultRepeat;
323
- const threshold = (_b = opts.threshold) !== null && _b !== void 0 ? _b : config.defaultThreshold;
324
- return {
325
- animation: (_c = opts.animation) !== null && _c !== void 0 ? _c : config.defaultAnimation,
326
- duration: (_d = opts.duration) !== null && _d !== void 0 ? _d : config.defaultDuration,
327
- delay: (_e = opts.delay) !== null && _e !== void 0 ? _e : config.defaultDelay,
328
- easing: (_f = opts.easing) !== null && _f !== void 0 ? _f : config.defaultEasing,
329
- threshold: Array.isArray(threshold) && threshold.length === 0 ? config.defaultThreshold : threshold,
330
- rootMargin: (_g = opts.rootMargin) !== null && _g !== void 0 ? _g : config.defaultRootMargin,
331
- repeat,
332
- once: (_h = opts.once) !== null && _h !== void 0 ? _h : (repeat ? false : config.defaultOnce),
333
- offset: (_j = opts.offset) !== null && _j !== void 0 ? _j : config.defaultOffset,
334
- stagger: (_k = opts.stagger) !== null && _k !== void 0 ? _k : 0,
335
- parallax: (_l = opts.parallax) !== null && _l !== void 0 ? _l : {},
336
- onStart: (_m = opts.onStart) !== null && _m !== void 0 ? _m : noop,
337
- onComplete: (_o = opts.onComplete) !== null && _o !== void 0 ? _o : noop,
338
- onEnter: (_p = opts.onEnter) !== null && _p !== void 0 ? _p : noop,
339
- onLeave: (_q = opts.onLeave) !== null && _q !== void 0 ? _q : noop,
340
- onProgress: (_r = opts.onProgress) !== null && _r !== void 0 ? _r : noop,
341
- progressMode: (_s = opts.progressMode) !== null && _s !== void 0 ? _s : 'ratio',
342
- progressVar: opts.progressVar ? normalizeVar(opts.progressVar) : '',
343
- };
344
- }
345
- function resolveTargets(target) {
346
- if (!target || !hasDOM())
347
- return [];
348
- if (typeof target === 'string')
349
- return Array.from(document.querySelectorAll(target));
350
- if (target instanceof Element)
351
- return [target];
352
- if (Array.isArray(target) || target instanceof NodeList) {
353
- return Array.from(target).filter((el) => el instanceof Element);
354
- }
355
- return [];
356
- }
357
- /**
358
- * Apply `offset` to the bottom edge of a rootMargin, preserving the other
359
- * three sides. `offset: 100` means "trigger 100px later" (bottom -100px).
360
- * @internal
361
- */
362
- function applyOffset(rootMargin, offset) {
363
- var _a, _b, _c;
364
- if (!offset)
365
- return rootMargin;
366
- const parts = (rootMargin || '0px').trim().split(/\s+/);
367
- const top = parts[0];
368
- const right = (_a = parts[1]) !== null && _a !== void 0 ? _a : top;
369
- const bottom = (_b = parts[2]) !== null && _b !== void 0 ? _b : top;
370
- const left = (_c = parts[3]) !== null && _c !== void 0 ? _c : right;
371
- const m = /^(-?\d*\.?\d+)(px)?$/.exec(bottom);
372
- const base = m ? parseFloat(m[1]) : 0; // non-px bottoms (e.g. %) cannot be combined; offset wins
373
- return `${top} ${right} ${base - offset}px ${left}`;
374
- }
375
- function hasParallax(p) {
376
- return !!p && Object.keys(p).some((k) => p[k] !== undefined);
377
- }
378
- function needsProgress(opts) {
379
- return hasParallax(opts.parallax) || opts.onProgress !== noop || !!opts.progressVar;
380
- }
381
- /**
382
- * True scroll progress of `el` through the viewport (or `root`): 0 when its top
383
- * edge reaches the bottom of the viewport, 1 when its bottom edge passes the top.
384
- * Works for elements taller than the viewport. Returns 0 without a DOM.
385
- */
386
- function getScrollProgress(el, root) {
387
- if (!hasDOM())
388
- return 0;
389
- const rect = el.getBoundingClientRect();
390
- let top = 0;
391
- let height = window.innerHeight || document.documentElement.clientHeight || 0;
392
- if (root) {
393
- const r = root.getBoundingClientRect();
394
- top = r.top;
395
- height = r.height;
396
- }
397
- const total = height + rect.height;
398
- if (total <= 0)
399
- return 0;
400
- const p = (top + height - rect.top) / total;
401
- return p < 0 ? 0 : p > 1 ? 1 : p;
402
- }
403
- /* ------------------------------------------------------------------ */
404
- /* Animation */
405
- /* ------------------------------------------------------------------ */
406
- /** The animation currently running on an element, so it can be cancelled/replaced. */
407
- const running = new WeakMap();
408
- const timers = new WeakMap();
409
- function cancelRunning(el) {
410
- const anim = running.get(el);
411
- if (anim) {
412
- running.delete(el);
413
- anim.onfinish = null;
414
- anim.cancel();
415
- }
416
- const timer = timers.get(el);
417
- if (timer !== undefined) {
418
- clearTimeout(timer);
419
- timers.delete(el);
420
- }
421
- }
422
- function setStyles(el, styles) {
423
- const style = el.style;
424
- if (!style)
425
- return;
426
- Object.keys(styles).forEach((prop) => {
427
- style[prop] = String(styles[prop]);
428
- });
429
- }
430
- const NUM_UNIT = /(-?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?)([a-z%]*)/gi;
431
- /**
432
- * Interpolate two CSS values at `t`. Numbers interpolate directly; strings
433
- * interpolate when they share the same structure (e.g. `translateY(40px)` ->
434
- * `translateY(0px)`, or `scale(0.8)` -> `scale(1)`). Otherwise snaps at 0.5.
435
- * @internal
436
- */
437
- function interpolateValue(from, to, t) {
438
- if (typeof from === 'number' && typeof to === 'number')
439
- return from + (to - from) * t;
440
- const a = String(from);
441
- const b = String(to);
442
- const ta = [];
443
- const tb = [];
444
- const skA = a.replace(NUM_UNIT, (_, n, u) => (ta.push([parseFloat(n), u]), '#'));
445
- const skB = b.replace(NUM_UNIT, (_, n, u) => (tb.push([parseFloat(n), u]), '#'));
446
- if (skA !== skB || ta.length !== tb.length)
447
- return t < 0.5 ? from : to;
448
- let i = 0;
449
- let ok = true;
450
- const out = skA.replace(/#/g, () => {
451
- const [na, ua] = ta[i];
452
- const [nb, ub] = tb[i++];
453
- if (ua !== ub && na !== 0 && nb !== 0 && ua && ub)
454
- ok = false;
455
- const unit = ua || ub;
456
- return `${+(na + (nb - na) * t).toFixed(4)}${unit}`;
457
- });
458
- return ok ? out : t < 0.5 ? from : to;
459
- }
460
- const EASING_SAMPLES = 30;
461
- let linearSupported;
462
- function supportsLinearEasing() {
463
- if (linearSupported === undefined) {
464
- linearSupported =
465
- typeof CSS !== 'undefined' &&
466
- typeof CSS.supports === 'function' &&
467
- CSS.supports('animation-timing-function', 'linear(0, 1)');
468
- }
469
- return linearSupported;
470
- }
471
- function sampleEasing(fn) {
472
- const values = [];
473
- for (let i = 0; i <= EASING_SAMPLES; i++) {
474
- const v = fn(i / EASING_SAMPLES);
475
- values.push(Number.isFinite(v) ? +v.toFixed(4) : i / EASING_SAMPLES);
476
- }
477
- return values;
478
- }
479
- function buildAnimation(preset, easing) {
480
- if (typeof easing !== 'function') {
481
- return { keyframes: [preset.from, preset.to], easing: resolveEasing(easing) };
482
- }
483
- const samples = sampleEasing(easing);
484
- // Modern browsers: an exact, property-agnostic `linear()` easing curve.
485
- if (supportsLinearEasing()) {
486
- return { keyframes: [preset.from, preset.to], easing: `linear(${samples.join(', ')})` };
487
- }
488
- // Fallback: approximate the curve with interpolated keyframes.
489
- const props = Object.keys(preset.from).filter((p) => p in preset.to);
490
- const keyframes = samples.map((eased, i) => {
491
- const frame = { offset: i / EASING_SAMPLES };
492
- props.forEach((prop) => {
493
- frame[prop] = interpolateValue(preset.from[prop], preset.to[prop], eased);
494
- });
495
- return frame;
496
- });
497
- return { keyframes, easing: 'linear' };
498
- }
499
- /** Make an element visible without animating (reduced motion / disabled / no WAAPI). */
500
- function reveal(el, config) {
501
- cancelRunning(el);
502
- if (config.useClassNames) {
503
- el.classList.remove(config.hiddenClass);
504
- el.classList.add(config.visibleClass);
505
- }
506
- else {
507
- const style = el.style;
508
- if (style)
509
- style.opacity = '';
510
- }
511
- }
512
- /** @internal Cancel a running/pending animation and make the element visible. */
513
- function stopAnimation(el, config = {}) {
514
- reveal(el, { ...DEFAULT_CONFIG, ...config });
515
- }
516
- /** @internal Whether animations should be skipped entirely. */
517
- function motionDisabled(config) {
518
- return !!config.disabled || prefersReducedMotion();
519
- }
520
- function runAnimation(el, opts, config, staggerIndex = 0) {
521
- const { duration, delay, stagger, onStart, onComplete } = opts;
522
- const totalDelay = Math.max(0, delay + staggerIndex * stagger);
523
- cancelRunning(el);
524
- if (motionDisabled(config)) {
525
- reveal(el, config);
526
- onStart(el);
527
- onComplete(el);
528
- return;
529
- }
530
- if (config.useClassNames) {
531
- if (totalDelay > 0)
532
- el.style.animationDelay = `${totalDelay}ms`;
533
- el.classList.remove(config.hiddenClass);
534
- el.classList.add(config.visibleClass);
535
- onStart(el);
536
- timers.set(el, setTimeout(() => {
537
- timers.delete(el);
538
- onComplete(el);
539
- }, duration + totalDelay));
540
- return;
541
- }
542
- const preset = resolvePreset(opts.animation);
543
- // Presets that don't animate opacity (slide-*, clip-*, scale-x, ...) would
544
- // otherwise stay at the `opacity: 0` applied while waiting to enter.
545
- if (!('opacity' in preset.to)) {
546
- const style = el.style;
547
- if (style && style.opacity === '0')
548
- style.opacity = '';
549
- }
550
- if (typeof el.animate !== 'function') {
551
- setStyles(el, preset.to);
552
- onStart(el);
553
- onComplete(el);
554
- return;
555
- }
556
- const built = buildAnimation(preset, opts.easing);
557
- const timing = { duration, delay: totalDelay, easing: built.easing, fill: 'both' };
558
- let anim;
559
- try {
560
- anim = el.animate(built.keyframes, timing);
561
- }
562
- catch (_a) {
563
- // Invalid user easing string (WAAPI throws a TypeError): fall back to 'ease'
564
- anim = el.animate(built.keyframes, { ...timing, easing: 'ease' });
565
- }
566
- running.set(el, anim);
567
- onStart(el);
568
- anim.onfinish = () => {
569
- if (running.get(el) === anim) {
570
- running.delete(el);
571
- // Persist the end state inline and drop the filling animation. This frees
572
- // the Animation object and lets later inline styles (parallax, user code)
573
- // take effect instead of being masked by `fill: forwards`.
574
- try {
575
- anim.commitStyles();
576
- }
577
- catch (_a) {
578
- setStyles(el, preset.to);
579
- }
580
- anim.cancel();
581
- }
582
- onComplete(el);
583
- };
584
- }
585
- function applyParallax(el, progress, parallax) {
586
- const { x = 0, y = 0, rotate = 0, scale = 1, speed = 1 } = parallax;
587
- const p = (progress - 0.5) * 2 * speed;
588
- const axis = (v) => (typeof v === 'number' ? `${v * p}px` : `calc(${v} * ${p})`);
589
- let transform = '';
590
- if (x)
591
- transform += ` translateX(${axis(x)})`;
592
- if (y)
593
- transform += ` translateY(${axis(y)})`;
594
- if (rotate)
595
- transform += ` rotate(${rotate * p}deg)`;
596
- if (scale !== 1)
597
- transform += ` scale(${1 + (scale - 1) * p})`;
598
- el.style.transform = transform.trim();
599
- }
600
- function hideElement(el, config) {
601
- cancelRunning(el);
602
- if (config.useClassNames) {
603
- el.classList.add(config.hiddenClass);
604
- el.classList.remove(config.visibleClass);
605
- }
606
- else {
607
- const style = el.style;
608
- if (style)
609
- style.opacity = '0';
610
- }
611
- }
612
- /** @internal Hide an element before its entrance animation, unless motion is off. */
613
- function prepareElement(el, config = {}) {
614
- const full = { ...DEFAULT_CONFIG, ...config };
615
- if (!motionDisabled(full))
616
- hideElement(el, full);
617
- }
618
- let progressThresholds;
619
- function getProgressThresholds() {
620
- if (!progressThresholds) {
621
- progressThresholds = [];
622
- for (let i = 0; i <= 100; i++)
623
- progressThresholds.push(i / 100);
624
- }
625
- return progressThresholds;
626
- }
627
- const PASSIVE = { passive: true };
628
- /* ------------------------------------------------------------------ */
629
- /* Instance */
630
- /* ------------------------------------------------------------------ */
631
- function createScrollAnimate(userConfig = {}) {
632
- let config = { ...DEFAULT_CONFIG, ...userConfig };
633
- const registry = new Map();
634
- // `once` elements that finished and were dropped from the registry (autoUnregister).
635
- let finished = new WeakSet();
636
- // Elements in `progressMode: 'scroll'` that are currently inside the viewport.
637
- const scrolling = new Set();
638
- let frame = 0;
639
- let listening = null;
640
- // Active watch() MutationObservers, disconnected by destroy().
641
- const watchers = new Set();
642
- // Observers are shared between elements with the same root/threshold/rootMargin,
643
- // instead of one (or two) IntersectionObservers per element.
644
- const pools = new Map();
645
- function pooled(root, key, create) {
646
- let pool = pools.get(root);
647
- if (!pool)
648
- pools.set(root, (pool = new Map()));
649
- let io = pool.get(key);
650
- if (!io)
651
- pool.set(key, (io = create()));
652
- return io;
653
- }
654
- function teardown(el, restore) {
655
- var _a;
656
- const record = registry.get(el);
657
- if (!record)
658
- return;
659
- record.observer.unobserve(el);
660
- (_a = record.progressObserver) === null || _a === void 0 ? void 0 : _a.unobserve(el);
661
- registry.delete(el);
662
- untrack(el);
663
- // An element that never animated would otherwise stay invisible forever.
664
- if (restore && !record.animated)
665
- reveal(el, config);
666
- }
667
- function pruneDetached() {
668
- registry.forEach((record, el) => {
669
- if (el.isConnected === false)
670
- teardown(el, false);
671
- });
672
- }
673
- function emitProgress(el, record, progress) {
674
- const opts = record.options;
675
- opts.onProgress(el, progress);
676
- if (opts.progressVar) {
677
- const style = el.style;
678
- if (style)
679
- style.setProperty(opts.progressVar, String(+progress.toFixed(4)));
680
- }
681
- if (hasParallax(opts.parallax) && !motionDisabled(config))
682
- applyParallax(el, progress, opts.parallax);
683
- }
684
- function update() {
685
- frame = 0;
686
- scrolling.forEach((el) => {
687
- const record = registry.get(el);
688
- if (record)
689
- emitProgress(el, record, getScrollProgress(el, config.root));
690
- });
691
- }
692
- // rAF-throttled; IntersectionObserver-capable browsers all have rAF.
693
- const schedule = () => frame || (frame = requestAnimationFrame(update));
694
- function listen(on) {
695
- if (on === !!listening)
696
- return;
697
- const method = on ? 'addEventListener' : 'removeEventListener';
698
- const target = listening || config.root || window;
699
- target[method]('scroll', schedule, PASSIVE);
700
- window[method]('resize', schedule, PASSIVE);
701
- listening = on ? target : null;
702
- if (!on && frame) {
703
- cancelAnimationFrame(frame);
704
- frame = 0;
705
- }
706
- }
707
- function untrack(el) {
708
- if (scrolling.delete(el) && !scrolling.size)
709
- listen(false);
710
- }
711
- function onScrollIntersect(entries) {
712
- entries.forEach((entry) => {
713
- const el = entry.target;
714
- const record = registry.get(el);
715
- if (!record)
716
- return;
717
- if (entry.isIntersecting) {
718
- scrolling.add(el);
719
- listen(true);
720
- }
721
- else {
722
- untrack(el);
723
- }
724
- // Emit right away so the edges (0 / 1) are reported even on fast scrolls.
725
- emitProgress(el, record, getScrollProgress(el, config.root));
726
- });
727
- }
728
- function onIntersect(entries) {
729
- const staggerCounts = new Map();
730
- entries.forEach((entry) => {
731
- var _a;
732
- const el = entry.target;
733
- const record = registry.get(el);
734
- if (!record)
735
- return;
736
- const opts = record.options;
737
- if (el.isConnected === false) {
738
- teardown(el, false);
739
- return;
740
- }
741
- if (entry.isIntersecting) {
742
- opts.onEnter(el);
743
- if (record.animated && !opts.repeat)
744
- return;
745
- // Stagger relative to siblings revealed in the same batch, so elements
746
- // scrolled into view later don't inherit an ever-growing delay.
747
- let staggerIndex = 0;
748
- if (opts.stagger > 0) {
749
- const parent = el.parentElement;
750
- staggerIndex = (_a = staggerCounts.get(parent)) !== null && _a !== void 0 ? _a : 0;
751
- staggerCounts.set(parent, staggerIndex + 1);
752
- }
753
- runAnimation(el, opts, config, staggerIndex);
754
- record.animated = true;
755
- if (opts.once && !opts.repeat) {
756
- // Keep the progress observer: parallax/onProgress must keep working.
757
- record.observer.unobserve(el);
758
- if (config.autoUnregister && !record.progressObserver) {
759
- // Nothing left to watch: free the record (the running animation
760
- // keeps its own reference until it finishes).
761
- finished.add(el);
762
- teardown(el, false);
763
- }
764
- }
765
- }
766
- else {
767
- opts.onLeave(el);
768
- if (opts.repeat && record.animated) {
769
- if (!motionDisabled(config))
770
- hideElement(el, config);
771
- record.animated = false;
772
- }
773
- }
774
- });
775
- }
776
- function onProgress(entries) {
777
- entries.forEach((entry) => {
778
- const record = registry.get(entry.target);
779
- if (!record)
780
- return;
781
- emitProgress(entry.target, record, entry.intersectionRatio);
782
- });
783
- }
784
- function getObserver(opts) {
785
- const rootMargin = applyOffset(opts.rootMargin, opts.offset);
786
- const threshold = opts.threshold;
787
- const root = config.root;
788
- return pooled(root, `m|${rootMargin}|${String(threshold)}`, () => new IntersectionObserver(onIntersect, { threshold, rootMargin, root: root }));
789
- }
790
- function getProgressObserver(opts) {
791
- const root = config.root;
792
- if (opts.progressMode === 'scroll') {
793
- // Only used to know when to start/stop measuring; progress itself comes
794
- // from a single shared, rAF-throttled passive scroll listener.
795
- return pooled(root, `s|${opts.rootMargin}`, () => new IntersectionObserver(onScrollIntersect, { threshold: 0, rootMargin: opts.rootMargin, root: root }));
796
- }
797
- return pooled(root, `p|${opts.rootMargin}`, () => new IntersectionObserver(onProgress, {
798
- threshold: getProgressThresholds(),
799
- rootMargin: opts.rootMargin,
800
- root: root,
801
- }));
802
- }
803
- function attach(el, record, observeMain) {
804
- var _a;
805
- record.observer = getObserver(record.options);
806
- if (observeMain)
807
- record.observer.observe(el);
808
- record.progressObserver = needsProgress(record.options) ? getProgressObserver(record.options) : undefined;
809
- (_a = record.progressObserver) === null || _a === void 0 ? void 0 : _a.observe(el);
810
- }
811
- function observeElement(el, opts) {
812
- if (registry.has(el) || finished.has(el))
813
- return;
814
- if (!supportsObserver()) {
815
- // No IntersectionObserver (very old browser): never leave content hidden.
816
- reveal(el, config);
817
- return;
818
- }
819
- if (!motionDisabled(config))
820
- hideElement(el, config);
821
- const record = { element: el, options: opts, animated: false };
822
- registry.set(el, record);
823
- attach(el, record, true);
824
- }
825
- function observeDataElement(el) {
826
- if (!registry.has(el))
827
- observeElement(el, parseDataAttributes(el, config));
828
- }
829
- const instance = {
830
- observe(target, options = {}) {
831
- pruneDetached();
832
- const opts = mergeOptions(options, config);
833
- resolveTargets(target).forEach((el) => observeElement(el, opts));
834
- },
835
- unobserve(target) {
836
- resolveTargets(target).forEach((el) => {
837
- finished.delete(el);
838
- teardown(el, true);
839
- });
840
- },
841
- init(rootElement) {
842
- const scope = rootElement !== null && rootElement !== void 0 ? rootElement : (hasDOM() ? document : null);
843
- if (!scope)
844
- return;
845
- pruneDetached();
846
- scope.querySelectorAll('[data-sa]').forEach(observeDataElement);
847
- },
848
- watch(rootElement) {
849
- const scope = rootElement !== null && rootElement !== void 0 ? rootElement : (hasDOM() ? document : null);
850
- if (!scope || typeof MutationObserver === 'undefined')
851
- return noop;
852
- instance.init(scope);
853
- const observeTree = (node) => {
854
- if (node.hasAttribute('data-sa'))
855
- observeDataElement(node);
856
- node.querySelectorAll('[data-sa]').forEach(observeDataElement);
857
- };
858
- const mo = new MutationObserver((records) => {
859
- let removed = false;
860
- records.forEach((record) => {
861
- if (record.type === 'attributes') {
862
- const target = record.target;
863
- if (target.isConnected !== false)
864
- observeTree(target);
865
- return;
866
- }
867
- record.addedNodes.forEach((node) => {
868
- if (node instanceof Element && node.isConnected !== false)
869
- observeTree(node);
870
- });
871
- if (record.removedNodes.length)
872
- removed = true;
873
- });
874
- // Free elements that left the DOM (they can't animate any more).
875
- if (removed)
876
- pruneDetached();
877
- });
878
- mo.observe(scope, { childList: true, subtree: true, attributes: true, attributeFilter: ['data-sa'] });
879
- watchers.add(mo);
880
- return () => {
881
- mo.disconnect();
882
- watchers.delete(mo);
883
- };
884
- },
885
- destroy() {
886
- watchers.forEach((mo) => mo.disconnect());
887
- watchers.clear();
888
- registry.forEach((record, el) => {
889
- if (!record.animated)
890
- reveal(el, config);
891
- });
892
- pools.forEach((pool) => pool.forEach((io) => io.disconnect()));
893
- pools.clear();
894
- registry.clear();
895
- scrolling.clear();
896
- listen(false);
897
- finished = new WeakSet();
898
- },
899
- refresh() {
900
- // Rebuild observers (e.g. after configure({ root })) without re-hiding or
901
- // replaying elements that have already animated.
902
- pools.forEach((pool) => pool.forEach((io) => io.disconnect()));
903
- pools.clear();
904
- scrolling.clear();
905
- listen(false);
906
- pruneDetached();
907
- if (!supportsObserver())
908
- return;
909
- registry.forEach((record, el) => {
910
- const done = record.animated && record.options.once && !record.options.repeat;
911
- attach(el, record, !done);
912
- });
913
- },
914
- animate(target, options = {}) {
915
- const opts = mergeOptions(options, config);
916
- resolveTargets(target).forEach((el) => runAnimation(el, opts, config, 0));
917
- },
918
- getObservedElements() {
919
- return Array.from(registry.values());
920
- },
921
- configure(newConfig) {
922
- config = { ...config, ...newConfig };
923
- },
924
- };
925
- return instance;
926
- }
927
-
928
- /**
929
- * use-scroll-animate - Staggered children
930
- * Reveal a container's children one after another when the container scrolls
931
- * into view, optionally also animating children that are added later.
932
- */
933
- let fallback$1 = null;
934
- /**
935
- * Animate the children of `container` with a stagger once it enters the
936
- * viewport. Returns a cleanup function. SSR-safe (no-op without a DOM).
937
- *
938
- * @example
939
- * const stop = staggerChildren(document.querySelector('ul'), { stagger: 60, observeChildren: true });
940
- */
941
- function staggerChildren(container, options = {}, instance) {
942
- if (!container || !hasDOM() || !supportsObserver())
943
- return () => undefined; // leave content visible
944
- const sa = instance || fallback$1 || (fallback$1 = createScrollAnimate());
945
- const { stagger = 80, delay = 0, threshold = 0.1, rootMargin = '0px', observeChildren = false, ...rest } = options;
946
- let items = Array.from(container.children);
947
- let revealed = false;
948
- const late = [];
949
- items.forEach((child) => prepareElement(child));
950
- const io = new IntersectionObserver((entries) => {
951
- if (revealed || !entries.some((entry) => entry.isIntersecting))
952
- return;
953
- revealed = true;
954
- io.disconnect();
955
- items.forEach((child, i) => {
956
- if (child.parentNode === container)
957
- sa.animate(child, { ...rest, delay: delay + i * stagger });
958
- });
959
- items = [];
960
- }, { threshold, rootMargin });
961
- io.observe(container);
962
- let mo;
963
- if (observeChildren && typeof MutationObserver !== 'undefined') {
964
- mo = new MutationObserver((records) => {
965
- records.forEach((record) => {
966
- record.addedNodes.forEach((node) => {
967
- if (!(node instanceof Element) || node.parentNode !== container)
968
- return;
969
- if (!revealed) {
970
- prepareElement(node);
971
- items.push(node);
972
- }
973
- else {
974
- // The core engine staggers siblings relative to the batch that
975
- // enters the viewport together.
976
- late.push(node);
977
- sa.observe(node, { ...rest, delay, stagger, threshold, rootMargin });
978
- }
979
- });
980
- record.removedNodes.forEach((node) => {
981
- if (!(node instanceof Element))
982
- return;
983
- items = items.filter((el) => el !== node);
984
- const i = late.indexOf(node);
985
- if (i >= 0) {
986
- late.splice(i, 1);
987
- sa.unobserve(node);
988
- }
989
- });
990
- });
991
- });
992
- mo.observe(container, { childList: true });
993
- }
994
- return () => {
995
- io.disconnect();
996
- mo === null || mo === void 0 ? void 0 : mo.disconnect();
997
- // Stopped before the container was revealed: never leave the children hidden.
998
- if (!revealed) {
999
- revealed = true;
1000
- items.forEach((child) => stopAnimation(child));
1001
- items = [];
1002
- }
1003
- late.forEach((el) => sa.unobserve(el));
1004
- late.length = 0;
1005
- };
1006
- }
1
+ import { h as hasDOM, s as supportsObserver, r as resolveTargets, p as prepareElement, a as stopAnimation, c as createScrollAnimate, g as getScrollProgress, b as prefersReducedMotion } from './chunks/core-BP-a1iNc.js';
2
+ export { E as EASING_MAP, P as PRESETS, d as resolveEasing, e as resolvePreset, f as supportsScrollTimeline } from './chunks/core-BP-a1iNc.js';
3
+ export { s as staggerChildren } from './chunks/stagger-DTv_WiUQ.js';
1007
4
 
1008
5
  /**
1009
6
  * use-scroll-animate - Sequence / timeline helper
@@ -1014,15 +11,13 @@ function plan(steps, defaults) {
1014
11
  const out = [];
1015
12
  let cursor = 0;
1016
13
  steps.forEach((step) => {
1017
- var _a, _b;
1018
14
  const { target, gap = 0, at, ...stepOpts } = step;
1019
15
  const opts = { ...defaults, ...stepOpts };
1020
- const duration = (_a = opts.duration) !== null && _a !== void 0 ? _a : 600;
1021
- const start = Math.max(0, at !== null && at !== void 0 ? at : cursor + gap) + ((_b = opts.delay) !== null && _b !== void 0 ? _b : 0);
16
+ const duration = opts.duration ?? 600;
17
+ const start = Math.max(0, at ?? cursor + gap) + (opts.delay ?? 0);
1022
18
  let end = Math.max(cursor, start);
1023
19
  resolveTargets(target).forEach((el, i) => {
1024
- var _a;
1025
- const delay = start + i * ((_a = opts.stagger) !== null && _a !== void 0 ? _a : 0);
20
+ const delay = start + i * (opts.stagger ?? 0);
1026
21
  out.push({ el, opts: { ...opts, duration, delay, stagger: 0 }, end: delay + duration });
1027
22
  end = Math.max(end, delay + duration);
1028
23
  });
@@ -1041,7 +36,6 @@ function plan(steps, defaults) {
1041
36
  * ], { trigger: '.hero' });
1042
37
  */
1043
38
  function sequence(steps, options = {}) {
1044
- var _a, _b;
1045
39
  const { trigger, instance, ...defaults } = options;
1046
40
  const sa = () => instance || fallback || (fallback = createScrollAnimate());
1047
41
  let io;
@@ -1069,22 +63,22 @@ function sequence(steps, options = {}) {
1069
63
  sa().animate(el, {
1070
64
  ...opts,
1071
65
  onComplete: (node) => {
1072
- done === null || done === void 0 ? void 0 : done(node);
66
+ done?.(node);
1073
67
  if (run === active && --left === 0)
1074
- settle === null || settle === void 0 ? void 0 : settle();
68
+ settle?.();
1075
69
  },
1076
70
  });
1077
71
  });
1078
72
  });
1079
73
  },
1080
74
  cancel() {
1081
- io === null || io === void 0 ? void 0 : io.disconnect();
75
+ io?.disconnect();
1082
76
  io = undefined;
1083
77
  prepared.forEach((el) => stopAnimation(el));
1084
78
  prepared = [];
1085
79
  active.forEach(({ el }) => stopAnimation(el));
1086
80
  active = [];
1087
- settle === null || settle === void 0 ? void 0 : settle();
81
+ settle?.();
1088
82
  },
1089
83
  duration() {
1090
84
  return plan(steps, defaults).reduce((max, p) => Math.max(max, p.end), 0);
@@ -1098,11 +92,11 @@ function sequence(steps, options = {}) {
1098
92
  io = new IntersectionObserver((entries) => {
1099
93
  if (!entries.some((e) => e.isIntersecting))
1100
94
  return;
1101
- io === null || io === void 0 ? void 0 : io.disconnect();
95
+ io?.disconnect();
1102
96
  io = undefined;
1103
97
  prepared = []; // play() takes over from here
1104
98
  controller.play();
1105
- }, { threshold: (_a = defaults.threshold) !== null && _a !== void 0 ? _a : 0.1, rootMargin: (_b = defaults.rootMargin) !== null && _b !== void 0 ? _b : '0px' });
99
+ }, { threshold: defaults.threshold ?? 0.1, rootMargin: defaults.rootMargin ?? '0px' });
1106
100
  io.observe(el);
1107
101
  }
1108
102
  }
@@ -1110,116 +104,95 @@ function sequence(steps, options = {}) {
1110
104
  }
1111
105
 
1112
106
  /**
1113
- * use-scroll-animate - React Integration
1114
- * Provides useScrollAnimate and useScrollStagger hooks for React applications.
1115
- * `useScrollStagger({ observeChildren: true })` also animates children added later.
107
+ * use-scroll-animate - parallax() helper
1116
108
  *
1117
- * Both hooks are thin wrappers around the core engine, so they share its
1118
- * behaviour: `once`, `offset`, custom easing functions, parallax,
1119
- * `prefers-reduced-motion` support, and proper cleanup on unmount.
109
+ * Moves elements at a different speed than the page while they cross the
110
+ * viewport. Built on the same scroll progress as `progressVar` (0 when the
111
+ * element's top enters at the bottom, 1 when its bottom leaves at the top):
112
+ * the progress is written to a CSS custom property (default `--sa-parallax`)
113
+ * and the offset is applied with the individual `translate` property, so it
114
+ * composes with entrance animations and other `transform`s.
1120
115
  */
1121
- const CALLBACKS = ['onStart', 'onComplete', 'onEnter', 'onLeave', 'onProgress'];
116
+ const PASSIVE = { passive: true };
1122
117
  /**
1123
- * Wrap the callbacks that exist at mount so they always call the latest
1124
- * version from the most recent render (avoids stale closures without
1125
- * re-creating observers on every render).
1126
- * @internal
118
+ * Apply a scroll parallax to `target` (selector, Element, NodeList or array).
119
+ * Returns a function that stops it and removes the inline styles it set.
120
+ * SSR-safe (no-op without a DOM / IntersectionObserver).
121
+ *
122
+ * @example
123
+ * const stop = parallax('.hero-bg', { speed: 0.3 });
124
+ * parallax('.badge', { speed: -0.15, axis: 'x' });
1127
125
  */
1128
- function withLatestCallbacks(latest) {
1129
- const initial = latest.current || {};
1130
- const opts = { ...initial };
1131
- CALLBACKS.forEach((name) => {
1132
- if (typeof initial[name] === 'function') {
1133
- opts[name] = (...args) => { var _a, _b; return (_b = (_a = latest.current) === null || _a === void 0 ? void 0 : _a[name]) === null || _b === void 0 ? void 0 : _b.call(_a, ...args); };
126
+ function parallax(target, options = {}) {
127
+ const els = resolveTargets(target);
128
+ if (!els.length || !hasDOM() || !supportsObserver())
129
+ return () => undefined;
130
+ const { speed = 0.2, axis = 'y', root = null, respectReducedMotion = true } = options;
131
+ const name = options.progressVar ? (options.progressVar.startsWith('--') ? options.progressVar : `--${options.progressVar}`) : '--sa-parallax';
132
+ const unit = axis === 'x' ? 'vw' : 'vh';
133
+ const visible = new Set();
134
+ let frame = 0;
135
+ let listening = false;
136
+ const scroller = root || window;
137
+ const apply = (el) => {
138
+ const style = el.style;
139
+ if (!style)
140
+ return;
141
+ const p = getScrollProgress(el, root);
142
+ style.setProperty(name, String(+p.toFixed(4)));
143
+ if (respectReducedMotion && prefersReducedMotion()) {
144
+ style.removeProperty('translate');
145
+ return;
1134
146
  }
147
+ const offset = `${+((p - 0.5) * speed * 100).toFixed(3)}${unit}`;
148
+ style.setProperty('translate', axis === 'x' ? `${offset} 0px` : `0px ${offset}`);
149
+ };
150
+ const update = () => {
151
+ frame = 0;
152
+ visible.forEach(apply);
153
+ };
154
+ const schedule = () => {
155
+ if (!frame)
156
+ frame = requestAnimationFrame(update);
157
+ };
158
+ const listen = (on) => {
159
+ if (on === listening)
160
+ return;
161
+ listening = on;
162
+ const method = on ? 'addEventListener' : 'removeEventListener';
163
+ scroller[method]('scroll', schedule, PASSIVE);
164
+ window[method]('resize', schedule, PASSIVE);
165
+ if (!on && frame) {
166
+ cancelAnimationFrame(frame);
167
+ frame = 0;
168
+ }
169
+ };
170
+ const io = new IntersectionObserver((entries) => {
171
+ entries.forEach((entry) => {
172
+ if (entry.isIntersecting)
173
+ visible.add(entry.target);
174
+ else
175
+ visible.delete(entry.target);
176
+ apply(entry.target); // report the edges even on fast scrolls
177
+ });
178
+ listen(visible.size > 0);
179
+ }, { threshold: 0, root });
180
+ els.forEach((el) => {
181
+ apply(el); // no jump before the first observer callback
182
+ io.observe(el);
1135
183
  });
1136
- return opts;
1137
- }
1138
- function createReactHooks(React) {
1139
- // Created lazily on the client so importing on the server is side-effect free.
1140
- let instance = null;
1141
- const getInstance = () => instance || (instance = createScrollAnimate());
1142
- function useScrollAnimate(options = {}) {
1143
- const ref = React.useRef(null);
1144
- const optionsRef = React.useRef(options);
1145
- optionsRef.current = options;
1146
- React.useEffect(() => {
1147
- const el = ref.current;
1148
- if (!el)
1149
- return;
1150
- const sa = getInstance();
1151
- sa.observe(el, withLatestCallbacks(optionsRef));
1152
- return () => sa.unobserve(el);
1153
- }, []);
1154
- return ref;
1155
- }
1156
- function useScrollStagger(options = {}) {
1157
- const ref = React.useRef(null);
1158
- const optionsRef = React.useRef(options);
1159
- optionsRef.current = options;
1160
- React.useEffect(() => {
1161
- const container = ref.current;
1162
- if (!container)
1163
- return;
1164
- return staggerChildren(container, withLatestCallbacks(optionsRef), getInstance());
1165
- }, []);
1166
- return ref;
1167
- }
1168
- return { useScrollAnimate, useScrollStagger };
1169
- }
1170
-
1171
- /**
1172
- * use-scroll-animate - Vue 3 Integration
1173
- * Provides useScrollAnimate and useScrollStagger composables for Vue 3 applications.
1174
- *
1175
- * A thin wrapper around the core engine, so it shares its behaviour: `once`,
1176
- * `offset`, custom easing functions, parallax, `prefers-reduced-motion`
1177
- * support, and cleanup on unmount.
1178
- */
1179
- /** Support refs on components (`$el`) as well as plain elements. */
1180
- function unwrap(value) {
1181
- if (value && typeof Element !== 'undefined' && !(value instanceof Element) && value.$el instanceof Element) {
1182
- return value.$el;
1183
- }
1184
- return value || null;
1185
- }
1186
- function createVueComposables(Vue) {
1187
- // Created lazily on the client so importing on the server is side-effect free.
1188
- let instance = null;
1189
- const getInstance = () => instance || (instance = createScrollAnimate());
1190
- function useScrollAnimate(options = {}) {
1191
- const animateRef = Vue.ref(null);
1192
- let el = null;
1193
- Vue.onMounted(() => {
1194
- const target = unwrap(animateRef.value);
1195
- if (!target)
184
+ return () => {
185
+ io.disconnect();
186
+ listen(false);
187
+ visible.clear();
188
+ els.forEach((el) => {
189
+ const style = el.style;
190
+ if (!style)
1196
191
  return;
1197
- el = target;
1198
- getInstance().observe(el, options);
192
+ style.removeProperty('translate');
193
+ style.removeProperty(name);
1199
194
  });
1200
- Vue.onUnmounted(() => {
1201
- if (el)
1202
- getInstance().unobserve(el);
1203
- el = null;
1204
- });
1205
- return { animateRef };
1206
- }
1207
- /** Stagger the children of `staggerRef`; `observeChildren: true` also animates children added later. */
1208
- function useScrollStagger(options = {}) {
1209
- const staggerRef = Vue.ref(null);
1210
- let stop;
1211
- Vue.onMounted(() => {
1212
- const target = unwrap(staggerRef.value);
1213
- if (target)
1214
- stop = staggerChildren(target, options, getInstance());
1215
- });
1216
- Vue.onUnmounted(() => {
1217
- stop === null || stop === void 0 ? void 0 : stop();
1218
- stop = undefined;
1219
- });
1220
- return { staggerRef };
1221
- }
1222
- return { useScrollAnimate, useScrollStagger };
195
+ };
1223
196
  }
1224
197
 
1225
198
  /**
@@ -1227,7 +200,9 @@ function createVueComposables(Vue) {
1227
200
  *
1228
201
  * A lightweight, dependency-free scroll animation library for modern web
1229
202
  * applications. Built with TypeScript, powered by IntersectionObserver and
1230
- * the Web Animations API. Safe to import during SSR.
203
+ * the Web Animations API (or the native scroll-driven timeline). Safe to
204
+ * import during SSR. Framework integrations live in the subpath entries:
205
+ * `use-scroll-animate/react`, `/vue`, `/svelte`, `/solid`, `/element`.
1231
206
  *
1232
207
  * @license MIT
1233
208
  * @see https://github.com/HarrisonCN/use-scroll-animate
@@ -1247,17 +222,7 @@ function createVueComposables(Vue) {
1247
222
  * ScrollAnimate.observe('.my-element', { animation: 'fade-in-up' });
1248
223
  * ```
1249
224
  */
1250
- const ScrollAnimate = createScrollAnimate();
225
+ const ScrollAnimate = /* @__PURE__ */ createScrollAnimate();
1251
226
 
1252
- exports.EASING_MAP = EASING_MAP;
1253
- exports.PRESETS = PRESETS;
1254
- exports.createReactHooks = createReactHooks;
1255
- exports.createScrollAnimate = createScrollAnimate;
1256
- exports.createVueComposables = createVueComposables;
1257
- exports.default = ScrollAnimate;
1258
- exports.getScrollProgress = getScrollProgress;
1259
- exports.resolveEasing = resolveEasing;
1260
- exports.resolvePreset = resolvePreset;
1261
- exports.sequence = sequence;
1262
- exports.staggerChildren = staggerChildren;
227
+ export { createScrollAnimate, ScrollAnimate as default, getScrollProgress, parallax, sequence };
1263
228
  //# sourceMappingURL=index.js.map