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.
- package/CHANGELOG.md +67 -0
- package/README.md +145 -10
- package/README_ja.md +57 -1
- package/README_zh.md +68 -1
- package/dist/{index.esm.js → chunks/core-BP-a1iNc.js} +297 -404
- package/dist/chunks/core-BP-a1iNc.js.map +1 -0
- package/dist/{index.mjs → chunks/core-B_J4rXbC.cjs} +312 -404
- package/dist/chunks/core-B_J4rXbC.cjs.map +1 -0
- package/dist/chunks/stagger-DHw0ExuR.cjs +86 -0
- package/dist/chunks/stagger-DHw0ExuR.cjs.map +1 -0
- package/dist/chunks/stagger-DTv_WiUQ.js +84 -0
- package/dist/chunks/stagger-DTv_WiUQ.js.map +1 -0
- package/dist/element.cjs +97 -0
- package/dist/element.cjs.map +1 -0
- package/dist/{types/types.d.ts → element.d.cts} +73 -10
- package/dist/element.d.ts +216 -0
- package/dist/element.js +95 -0
- package/dist/element.js.map +1 -0
- package/dist/element.umd.js +2 -0
- package/dist/element.umd.js.map +1 -0
- package/dist/index.cjs +241 -0
- package/dist/index.cjs.map +1 -0
- package/dist/{index.d.mts → index.d.cts} +84 -51
- package/dist/index.d.ts +84 -51
- package/dist/index.js +98 -1133
- package/dist/index.js.map +1 -1
- package/dist/index.umd.js +5 -3
- package/dist/index.umd.js.map +1 -1
- package/dist/react.cjs +67 -0
- package/dist/react.cjs.map +1 -0
- package/dist/react.d.cts +159 -0
- package/dist/react.d.ts +159 -0
- package/dist/react.js +64 -0
- package/dist/react.js.map +1 -0
- package/dist/solid.cjs +62 -0
- package/dist/solid.cjs.map +1 -0
- package/dist/solid.d.cts +245 -0
- package/dist/solid.d.ts +245 -0
- package/dist/solid.js +58 -0
- package/dist/solid.js.map +1 -0
- package/dist/svelte.cjs +65 -0
- package/dist/svelte.cjs.map +1 -0
- package/dist/svelte.d.cts +244 -0
- package/dist/svelte.d.ts +244 -0
- package/dist/svelte.js +62 -0
- package/dist/svelte.js.map +1 -0
- package/dist/vue.cjs +61 -0
- package/dist/vue.cjs.map +1 -0
- package/dist/vue.d.cts +159 -0
- package/dist/vue.d.ts +159 -0
- package/dist/vue.js +59 -0
- package/dist/vue.js.map +1 -0
- package/docs/API.md +139 -0
- package/docs/deprecations.md +20 -0
- package/docs/migration-from-aos.md +67 -0
- package/docs/migration-from-gsap-scrolltrigger.md +80 -0
- package/package.json +86 -15
- package/dist/index.esm.js.map +0 -1
- package/dist/index.mjs.map +0 -1
- package/dist/types/core.d.ts +0 -41
- package/dist/types/index.d.ts +0 -36
- package/dist/types/presets.d.ts +0 -15
- package/dist/types/react.d.ts +0 -29
- package/dist/types/sequence.d.ts +0 -38
- package/dist/types/stagger.d.ts +0 -25
- package/dist/types/vue.d.ts +0 -28
package/dist/index.js
CHANGED
|
@@ -1,1009 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
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 =
|
|
1021
|
-
const start = Math.max(0, at
|
|
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
|
-
|
|
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
|
|
66
|
+
done?.(node);
|
|
1073
67
|
if (run === active && --left === 0)
|
|
1074
|
-
settle
|
|
68
|
+
settle?.();
|
|
1075
69
|
},
|
|
1076
70
|
});
|
|
1077
71
|
});
|
|
1078
72
|
});
|
|
1079
73
|
},
|
|
1080
74
|
cancel() {
|
|
1081
|
-
io
|
|
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
|
|
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
|
|
95
|
+
io?.disconnect();
|
|
1102
96
|
io = undefined;
|
|
1103
97
|
prepared = []; // play() takes over from here
|
|
1104
98
|
controller.play();
|
|
1105
|
-
}, { threshold:
|
|
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 -
|
|
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
|
-
*
|
|
1118
|
-
*
|
|
1119
|
-
*
|
|
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
|
|
116
|
+
const PASSIVE = { passive: true };
|
|
1122
117
|
/**
|
|
1123
|
-
*
|
|
1124
|
-
*
|
|
1125
|
-
*
|
|
1126
|
-
*
|
|
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
|
|
1129
|
-
const
|
|
1130
|
-
|
|
1131
|
-
|
|
1132
|
-
|
|
1133
|
-
|
|
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
|
|
1137
|
-
|
|
1138
|
-
|
|
1139
|
-
|
|
1140
|
-
|
|
1141
|
-
|
|
1142
|
-
|
|
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
|
-
|
|
1198
|
-
|
|
192
|
+
style.removeProperty('translate');
|
|
193
|
+
style.removeProperty(name);
|
|
1199
194
|
});
|
|
1200
|
-
|
|
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
|
|
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
|
-
|
|
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
|