@wix/motion 2.1.8 → 2.1.9
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/dist/cjs/motion.js +1 -1
- package/dist/cjs/motion.js.map +1 -1
- package/dist/es/motion.js +398 -359
- package/dist/es/motion.js.map +1 -1
- package/dist/tsconfig.build.tsbuildinfo +1 -1
- package/dist/types/api/common.d.ts.map +1 -1
- package/dist/types/utils.d.ts +19 -0
- package/dist/types/utils.d.ts.map +1 -1
- package/package.json +1 -1
package/dist/es/motion.js
CHANGED
|
@@ -4,49 +4,49 @@ class O {
|
|
|
4
4
|
ready;
|
|
5
5
|
isCSS;
|
|
6
6
|
longestAnimation;
|
|
7
|
-
constructor(
|
|
8
|
-
this.animations =
|
|
7
|
+
constructor(e, n) {
|
|
8
|
+
this.animations = e, this.options = n, this.ready = n?.measured || Promise.resolve(), this.isCSS = e[0] instanceof CSSAnimation, this.longestAnimation = this._getAnimationWithLongestEndTime();
|
|
9
9
|
}
|
|
10
10
|
_getAnimationWithLongestEndTime() {
|
|
11
|
-
return this.animations.reduce((
|
|
12
|
-
const i =
|
|
13
|
-
return i > s ?
|
|
11
|
+
return this.animations.reduce((e, n) => {
|
|
12
|
+
const i = e.effect?.getComputedTiming().endTime ?? 0, s = n.effect?.getComputedTiming().endTime ?? 0;
|
|
13
|
+
return i > s ? e : n;
|
|
14
14
|
}, this.animations[0]);
|
|
15
15
|
}
|
|
16
16
|
getProgress() {
|
|
17
17
|
return this.longestAnimation?.effect?.getComputedTiming().progress || 0;
|
|
18
18
|
}
|
|
19
|
-
async play(
|
|
19
|
+
async play(e) {
|
|
20
20
|
await this.ready;
|
|
21
21
|
for (const n of this.animations)
|
|
22
22
|
n.play();
|
|
23
|
-
await Promise.all(this.animations.map((n) => n.ready)),
|
|
23
|
+
await Promise.all(this.animations.map((n) => n.ready)), e && e();
|
|
24
24
|
}
|
|
25
25
|
pause() {
|
|
26
|
-
for (const
|
|
27
|
-
|
|
26
|
+
for (const e of this.animations)
|
|
27
|
+
e.pause();
|
|
28
28
|
}
|
|
29
|
-
async reverse(
|
|
29
|
+
async reverse(e) {
|
|
30
30
|
await this.ready;
|
|
31
31
|
for (const n of this.animations)
|
|
32
32
|
n.reverse();
|
|
33
|
-
await Promise.all(this.animations.map((n) => n.ready)),
|
|
33
|
+
await Promise.all(this.animations.map((n) => n.ready)), e && e();
|
|
34
34
|
}
|
|
35
|
-
progress(
|
|
35
|
+
progress(e) {
|
|
36
36
|
for (const n of this.animations) {
|
|
37
37
|
const { delay: i, duration: s, iterations: r } = n.effect.getTiming(), c = (Number.isFinite(s) ? s : 0) * (Number.isFinite(r) ? r : 1);
|
|
38
|
-
n.currentTime = ((i || 0) + c) *
|
|
38
|
+
n.currentTime = ((i || 0) + c) * e;
|
|
39
39
|
}
|
|
40
40
|
}
|
|
41
41
|
cancel() {
|
|
42
|
-
for (const
|
|
43
|
-
|
|
42
|
+
for (const e of this.animations)
|
|
43
|
+
e.cancel();
|
|
44
44
|
}
|
|
45
|
-
setPlaybackRate(
|
|
45
|
+
setPlaybackRate(e) {
|
|
46
46
|
for (const n of this.animations)
|
|
47
|
-
n.playbackRate =
|
|
47
|
+
n.playbackRate = e;
|
|
48
48
|
}
|
|
49
|
-
async onFinish(
|
|
49
|
+
async onFinish(e) {
|
|
50
50
|
try {
|
|
51
51
|
await Promise.all(this.animations.map((i) => i.finished));
|
|
52
52
|
const n = this.animations[0];
|
|
@@ -57,12 +57,12 @@ class O {
|
|
|
57
57
|
i.dispatchEvent(r);
|
|
58
58
|
}
|
|
59
59
|
}
|
|
60
|
-
|
|
60
|
+
e();
|
|
61
61
|
} catch (n) {
|
|
62
62
|
console.warn("animation was interrupted - aborting onFinish callback - ", n);
|
|
63
63
|
}
|
|
64
64
|
}
|
|
65
|
-
async onAbort(
|
|
65
|
+
async onAbort(e) {
|
|
66
66
|
try {
|
|
67
67
|
await Promise.all(this.animations.map((n) => n.finished));
|
|
68
68
|
} catch (n) {
|
|
@@ -75,25 +75,25 @@ class O {
|
|
|
75
75
|
s.dispatchEvent(r);
|
|
76
76
|
}
|
|
77
77
|
}
|
|
78
|
-
|
|
78
|
+
e();
|
|
79
79
|
}
|
|
80
80
|
}
|
|
81
81
|
}
|
|
82
82
|
get finished() {
|
|
83
|
-
return Promise.all(this.animations.map((
|
|
83
|
+
return Promise.all(this.animations.map((e) => e.finished));
|
|
84
84
|
}
|
|
85
85
|
get playState() {
|
|
86
|
-
return this.animations.some((
|
|
86
|
+
return this.animations.some((e) => e.playState === "running") ? "running" : this.animations[0]?.playState;
|
|
87
87
|
}
|
|
88
|
-
hasAnimationName(
|
|
89
|
-
return this.animations.some((n) => n.animationName ===
|
|
88
|
+
hasAnimationName(e) {
|
|
89
|
+
return this.animations.some((n) => n.animationName === e);
|
|
90
90
|
}
|
|
91
|
-
hasAnimationId(
|
|
92
|
-
return this.animations.some((n) => n.id ===
|
|
91
|
+
hasAnimationId(e) {
|
|
92
|
+
return this.animations.some((n) => n.id === e);
|
|
93
93
|
}
|
|
94
94
|
getTimingOptions() {
|
|
95
|
-
return this.animations.map((
|
|
96
|
-
const n =
|
|
95
|
+
return this.animations.map((e) => {
|
|
96
|
+
const n = e.effect?.getTiming(), i = n?.delay ?? 0, s = Number(n?.duration) || 0, r = n?.iterations ?? 1;
|
|
97
97
|
return {
|
|
98
98
|
delay: i,
|
|
99
99
|
duration: s,
|
|
@@ -102,33 +102,33 @@ class O {
|
|
|
102
102
|
});
|
|
103
103
|
}
|
|
104
104
|
}
|
|
105
|
-
const G = (
|
|
105
|
+
const G = (t) => t, V = (t) => 1 - Math.cos(t * Math.PI / 2), B = (t) => Math.sin(t * Math.PI / 2), X = (t) => -(Math.cos(Math.PI * t) - 1) / 2, U = (t) => t ** 2, Y = (t) => 1 - (1 - t) ** 2, Z = (t) => t < 0.5 ? 2 * t ** 2 : 1 - (-2 * t + 2) ** 2 / 2, J = (t) => t ** 3, Q = (t) => 1 - (1 - t) ** 3, tt = (t) => t < 0.5 ? 4 * t ** 3 : 1 - (-2 * t + 2) ** 3 / 2, et = (t) => t ** 4, nt = (t) => 1 - (1 - t) ** 4, it = (t) => t < 0.5 ? 8 * t ** 4 : 1 - (-2 * t + 2) ** 4 / 2, st = (t) => t ** 5, rt = (t) => 1 - (1 - t) ** 5, ot = (t) => t < 0.5 ? 16 * t ** 5 : 1 - (-2 * t + 2) ** 5 / 2, at = (t) => t === 0 ? 0 : 2 ** (10 * t - 10), ct = (t) => t === 1 ? 1 : 1 - 2 ** (-10 * t), ut = (t) => t === 0 ? 0 : t === 1 ? 1 : t < 0.5 ? 2 ** (20 * t - 10) / 2 : (2 - 2 ** (-20 * t + 10)) / 2, ft = (t) => 1 - Math.sqrt(1 - t ** 2), mt = (t) => Math.sqrt(1 - (t - 1) ** 2), lt = (t) => t < 0.5 ? (1 - Math.sqrt(1 - 4 * t ** 2)) / 2 : (Math.sqrt(-(2 * t - 3) * (2 * t - 1)) + 1) / 2, ht = (t) => 2.70158 * t ** 3 - 1.70158 * t ** 2, dt = (t) => 1 + 2.70158 * (t - 1) ** 3 + 1.70158 * (t - 1) ** 2, pt = (t, e = 1.70158 * 1.525) => t < 0.5 ? (2 * t) ** 2 * ((e + 1) * 2 * t - e) / 2 : ((2 * t - 2) ** 2 * ((e + 1) * (t * 2 - 2) + e) + 2) / 2, z = {
|
|
106
106
|
linear: G,
|
|
107
107
|
sineIn: V,
|
|
108
108
|
sineOut: B,
|
|
109
|
-
sineInOut:
|
|
110
|
-
quadIn:
|
|
111
|
-
quadOut:
|
|
112
|
-
quadInOut:
|
|
113
|
-
cubicIn:
|
|
109
|
+
sineInOut: X,
|
|
110
|
+
quadIn: U,
|
|
111
|
+
quadOut: Y,
|
|
112
|
+
quadInOut: Z,
|
|
113
|
+
cubicIn: J,
|
|
114
114
|
cubicOut: Q,
|
|
115
|
-
cubicInOut:
|
|
116
|
-
quartIn:
|
|
117
|
-
quartOut:
|
|
118
|
-
quartInOut:
|
|
119
|
-
quintIn:
|
|
120
|
-
quintOut:
|
|
121
|
-
quintInOut:
|
|
122
|
-
expoIn:
|
|
123
|
-
expoOut:
|
|
124
|
-
expoInOut:
|
|
125
|
-
circIn:
|
|
126
|
-
circOut:
|
|
127
|
-
circInOut:
|
|
128
|
-
backIn:
|
|
129
|
-
backOut:
|
|
130
|
-
backInOut:
|
|
131
|
-
},
|
|
115
|
+
cubicInOut: tt,
|
|
116
|
+
quartIn: et,
|
|
117
|
+
quartOut: nt,
|
|
118
|
+
quartInOut: it,
|
|
119
|
+
quintIn: st,
|
|
120
|
+
quintOut: rt,
|
|
121
|
+
quintInOut: ot,
|
|
122
|
+
expoIn: at,
|
|
123
|
+
expoOut: ct,
|
|
124
|
+
expoInOut: ut,
|
|
125
|
+
circIn: ft,
|
|
126
|
+
circOut: mt,
|
|
127
|
+
circInOut: lt,
|
|
128
|
+
backIn: ht,
|
|
129
|
+
backOut: dt,
|
|
130
|
+
backInOut: pt
|
|
131
|
+
}, C = {
|
|
132
132
|
linear: "linear",
|
|
133
133
|
ease: "ease",
|
|
134
134
|
easeIn: "ease-in",
|
|
@@ -159,18 +159,52 @@ const G = (e) => e, V = (e) => 1 - Math.cos(e * Math.PI / 2), B = (e) => Math.si
|
|
|
159
159
|
backOut: "cubic-bezier(0.175, 0.885, 0.32, 1.275)",
|
|
160
160
|
backInOut: "cubic-bezier(0.68, -0.55, 0.265, 1.55)"
|
|
161
161
|
};
|
|
162
|
-
function
|
|
163
|
-
return
|
|
162
|
+
function gt(t) {
|
|
163
|
+
return t === "percentage" ? "%" : t || "px";
|
|
164
164
|
}
|
|
165
|
-
|
|
166
|
-
|
|
165
|
+
const yt = /^(webkit|moz|ms|o)(?=[A-Z])/, bt = Object.assign(/* @__PURE__ */ Object.create(null), {
|
|
166
|
+
float: "cssFloat",
|
|
167
|
+
"animation-timing-function": "easing",
|
|
168
|
+
"animation-composition": "composite"
|
|
169
|
+
});
|
|
170
|
+
function Wt(t) {
|
|
171
|
+
return t.startsWith("--") ? t : (yt.test(t) ? `-${t}` : t).replace(/[A-Z]/g, (n) => `-${n.toLowerCase()}`);
|
|
167
172
|
}
|
|
168
|
-
function
|
|
169
|
-
|
|
173
|
+
function vt(t) {
|
|
174
|
+
return t.startsWith("--") || !t.includes("-") ? t : t.replace(/^-/, "").replace(/-([a-z])/g, (e, n) => n.toUpperCase());
|
|
175
|
+
}
|
|
176
|
+
function R(t) {
|
|
177
|
+
return bt[t] || vt(t);
|
|
178
|
+
}
|
|
179
|
+
function Et(t) {
|
|
180
|
+
for (const e in t)
|
|
181
|
+
if (Object.hasOwn(t, e) && R(e) !== e)
|
|
182
|
+
return !0;
|
|
183
|
+
return !1;
|
|
184
|
+
}
|
|
185
|
+
function _t(t) {
|
|
186
|
+
if (!Array.isArray(t))
|
|
187
|
+
return t;
|
|
188
|
+
let e;
|
|
189
|
+
return t.forEach((n, i) => {
|
|
190
|
+
if (!n || typeof n != "object" || !Et(n))
|
|
191
|
+
return;
|
|
192
|
+
e ??= t.slice();
|
|
193
|
+
const s = {};
|
|
194
|
+
for (const r in n)
|
|
195
|
+
Object.hasOwn(n, r) && (s[R(r)] = n[r]);
|
|
196
|
+
e[i] = s;
|
|
197
|
+
}), e || t;
|
|
198
|
+
}
|
|
199
|
+
function wt(t) {
|
|
200
|
+
return t ? C[t] || t : C.linear;
|
|
201
|
+
}
|
|
202
|
+
function At(t, e, n, i) {
|
|
203
|
+
const s = 3 * t, r = 3 * (n - t) - s, c = 1 - s - r, o = 3 * e, m = 3 * (i - e) - o, l = 1 - o - m, a = (h) => ((c * h + r) * h + s) * h, u = (h) => ((l * h + m) * h + o) * h, f = (h) => (3 * c * h + 2 * r) * h + s;
|
|
170
204
|
function p(h) {
|
|
171
205
|
let d = h;
|
|
172
206
|
for (let y = 0; y < 8; y++) {
|
|
173
|
-
const b =
|
|
207
|
+
const b = a(d) - h;
|
|
174
208
|
if (Math.abs(b) < 1e-7) return d;
|
|
175
209
|
const _ = f(d);
|
|
176
210
|
if (Math.abs(_) < 1e-6) break;
|
|
@@ -178,7 +212,7 @@ function yt(e, t, n, i) {
|
|
|
178
212
|
}
|
|
179
213
|
let v = 0, g = 1;
|
|
180
214
|
for (d = (v + g) / 2; g - v > 1e-7; ) {
|
|
181
|
-
const y =
|
|
215
|
+
const y = a(d);
|
|
182
216
|
if (Math.abs(y - h) < 1e-7) return d;
|
|
183
217
|
h > y ? v = d : g = d, d = (v + g) / 2;
|
|
184
218
|
}
|
|
@@ -186,28 +220,28 @@ function yt(e, t, n, i) {
|
|
|
186
220
|
}
|
|
187
221
|
return (h) => h <= 0 ? 0 : h >= 1 ? 1 : u(p(h));
|
|
188
222
|
}
|
|
189
|
-
function
|
|
190
|
-
const
|
|
223
|
+
function Ot(t) {
|
|
224
|
+
const e = t.match(
|
|
191
225
|
/^cubic-bezier\(\s*(-?[\d.]+)\s*,\s*(-?[\d.]+)\s*,\s*(-?[\d.]+)\s*,\s*(-?[\d.]+)\s*\)$/
|
|
192
226
|
);
|
|
193
|
-
if (!
|
|
194
|
-
const n = parseFloat(
|
|
227
|
+
if (!e) return;
|
|
228
|
+
const n = parseFloat(e[1]), i = parseFloat(e[2]), s = parseFloat(e[3]), r = parseFloat(e[4]);
|
|
195
229
|
if (![n, i, s, r].some(isNaN))
|
|
196
|
-
return
|
|
230
|
+
return At(n, i, s, r);
|
|
197
231
|
}
|
|
198
|
-
function
|
|
199
|
-
const
|
|
200
|
-
if (!
|
|
201
|
-
const n =
|
|
232
|
+
function It(t) {
|
|
233
|
+
const e = t.match(/^linear\((.+)\)$/);
|
|
234
|
+
if (!e) return;
|
|
235
|
+
const n = e[1].split(",").map((c) => c.trim()).filter(Boolean);
|
|
202
236
|
if (n.length === 0) return;
|
|
203
237
|
const i = [];
|
|
204
238
|
for (const c of n) {
|
|
205
|
-
const
|
|
239
|
+
const o = c.split(/\s+/), m = parseFloat(o[0]);
|
|
206
240
|
if (isNaN(m)) return;
|
|
207
241
|
const l = [];
|
|
208
|
-
for (let
|
|
209
|
-
if (a
|
|
210
|
-
const u = parseFloat(a
|
|
242
|
+
for (let a = 1; a < o.length; a++)
|
|
243
|
+
if (o[a].endsWith("%")) {
|
|
244
|
+
const u = parseFloat(o[a]) / 100;
|
|
211
245
|
if (isNaN(u)) return;
|
|
212
246
|
l.push(u);
|
|
213
247
|
}
|
|
@@ -219,12 +253,12 @@ function vt(e) {
|
|
|
219
253
|
for (; s < i.length; )
|
|
220
254
|
if (i[s].pos === null) {
|
|
221
255
|
const c = s - 1;
|
|
222
|
-
let
|
|
223
|
-
for (;
|
|
224
|
-
const m = i[c].pos, l = i[
|
|
225
|
-
for (let u = c + 1; u <
|
|
226
|
-
i[u].pos = m + (l - m) * (u - c) /
|
|
227
|
-
s =
|
|
256
|
+
let o = s;
|
|
257
|
+
for (; o < i.length && i[o].pos === null; ) o++;
|
|
258
|
+
const m = i[c].pos, l = i[o].pos, a = o - c;
|
|
259
|
+
for (let u = c + 1; u < o; u++)
|
|
260
|
+
i[u].pos = m + (l - m) * (u - c) / a;
|
|
261
|
+
s = o + 1;
|
|
228
262
|
} else
|
|
229
263
|
s++;
|
|
230
264
|
for (let c = 1; c < i.length; c++)
|
|
@@ -232,35 +266,35 @@ function vt(e) {
|
|
|
232
266
|
const r = i;
|
|
233
267
|
return (c) => {
|
|
234
268
|
if (c <= r[0].pos) return r[0].output;
|
|
235
|
-
const
|
|
236
|
-
if (c >=
|
|
269
|
+
const o = r[r.length - 1];
|
|
270
|
+
if (c >= o.pos) return o.output;
|
|
237
271
|
let m = 0, l = r.length - 1;
|
|
238
272
|
for (; m < l - 1; ) {
|
|
239
273
|
const f = m + l >>> 1;
|
|
240
274
|
r[f].pos <= c ? m = f : l = f;
|
|
241
275
|
}
|
|
242
|
-
const
|
|
243
|
-
return u.pos ===
|
|
276
|
+
const a = r[m], u = r[l];
|
|
277
|
+
return u.pos === a.pos ? u.output : a.output + (u.output - a.output) * (c - a.pos) / (u.pos - a.pos);
|
|
244
278
|
};
|
|
245
279
|
}
|
|
246
|
-
function D(
|
|
247
|
-
if (!
|
|
248
|
-
const
|
|
249
|
-
return
|
|
280
|
+
function D(t) {
|
|
281
|
+
if (!t) return;
|
|
282
|
+
const e = z[t];
|
|
283
|
+
return e || (Ot(t) ?? It(t) ?? z.linear);
|
|
250
284
|
}
|
|
251
|
-
class
|
|
285
|
+
class Tt extends O {
|
|
252
286
|
animationGroups;
|
|
253
287
|
delay;
|
|
254
288
|
offset;
|
|
255
289
|
offsetEasing;
|
|
256
290
|
timingOptions;
|
|
257
|
-
constructor(
|
|
258
|
-
const i =
|
|
259
|
-
super(i), this.animationGroups =
|
|
291
|
+
constructor(e, n = {}) {
|
|
292
|
+
const i = e.flatMap((s) => [...s.animations]);
|
|
293
|
+
super(i), this.animationGroups = e, this.delay = n.delay ?? 0, this.offset = n.offset ?? 0, this.offsetEasing = typeof n.offsetEasing == "function" ? n.offsetEasing : D(n.offsetEasing) ?? G, this.timingOptions = this.animationGroups.map((s) => s.getTimingOptions().map(({ delay: r, duration: c, iterations: o }) => ({
|
|
260
294
|
delay: r,
|
|
261
295
|
duration: Number.isFinite(c) ? c : 0,
|
|
262
|
-
iterations: Number.isFinite(
|
|
263
|
-
}))), this.applyOffsets(), this.ready = Promise.all(
|
|
296
|
+
iterations: Number.isFinite(o) ? o : 1
|
|
297
|
+
}))), this.applyOffsets(), this.ready = Promise.all(e.map((s) => s.ready)).then(() => {
|
|
264
298
|
});
|
|
265
299
|
}
|
|
266
300
|
/**
|
|
@@ -269,35 +303,35 @@ class Et extends O {
|
|
|
269
303
|
* where i is the group index and last is the index of the final group.
|
|
270
304
|
*/
|
|
271
305
|
calculateOffsets() {
|
|
272
|
-
const
|
|
273
|
-
if (
|
|
274
|
-
const n =
|
|
306
|
+
const e = this.animationGroups.length;
|
|
307
|
+
if (e <= 1) return [0];
|
|
308
|
+
const n = e - 1;
|
|
275
309
|
return Array.from(
|
|
276
|
-
{ length:
|
|
310
|
+
{ length: e },
|
|
277
311
|
(i, s) => this.offsetEasing(s / n) * n * this.offset | 0
|
|
278
312
|
);
|
|
279
313
|
}
|
|
280
314
|
applyOffsets() {
|
|
281
315
|
if (this.animationGroups.length === 0 || this.animations.length === 0) return;
|
|
282
|
-
const
|
|
316
|
+
const e = this.calculateOffsets(), n = this.getSequenceActiveDuration(e);
|
|
283
317
|
this.animationGroups.forEach((i, s) => {
|
|
284
318
|
i.animations.forEach((r, c) => {
|
|
285
|
-
const
|
|
286
|
-
if (!
|
|
287
|
-
const { delay: m, duration: l, iterations:
|
|
288
|
-
|
|
319
|
+
const o = r.effect;
|
|
320
|
+
if (!o) return;
|
|
321
|
+
const { delay: m, duration: l, iterations: a } = this.timingOptions[s][c], u = m + e[s], f = n - (u + l * a);
|
|
322
|
+
o.updateTiming({ delay: u + this.delay, endDelay: f });
|
|
289
323
|
});
|
|
290
324
|
});
|
|
291
325
|
}
|
|
292
|
-
getSequenceActiveDuration(
|
|
326
|
+
getSequenceActiveDuration(e) {
|
|
293
327
|
const n = [];
|
|
294
328
|
for (let i = 0; i < this.timingOptions.length; i++) {
|
|
295
329
|
const s = this.timingOptions[i].reduce((r, c) => {
|
|
296
330
|
if (!c) return r;
|
|
297
|
-
const { delay:
|
|
298
|
-
return Math.max(r,
|
|
331
|
+
const { delay: o, duration: m, iterations: l } = c;
|
|
332
|
+
return Math.max(r, o + m * l);
|
|
299
333
|
}, 0);
|
|
300
|
-
n.push(
|
|
334
|
+
n.push(e[i] + s);
|
|
301
335
|
}
|
|
302
336
|
return Math.max(...n);
|
|
303
337
|
}
|
|
@@ -306,14 +340,14 @@ class Et extends O {
|
|
|
306
340
|
* stagger offsets for all groups. Each entry specifies the target index
|
|
307
341
|
* in the animationGroups array where the group should be inserted.
|
|
308
342
|
*/
|
|
309
|
-
addGroups(
|
|
310
|
-
if (
|
|
311
|
-
const n = [...
|
|
343
|
+
addGroups(e) {
|
|
344
|
+
if (e.length === 0) return;
|
|
345
|
+
const n = [...e].sort((i, s) => s.index - i.index);
|
|
312
346
|
for (const { index: i, group: s } of n) {
|
|
313
347
|
const r = Math.min(i, this.animationGroups.length);
|
|
314
348
|
this.animationGroups.splice(r, 0, s), this.timingOptions.splice(r, 0, s.getTimingOptions());
|
|
315
|
-
const c = [...s.animations],
|
|
316
|
-
this.animations.splice(
|
|
349
|
+
const c = [...s.animations], o = this.animationGroups.slice(0, r).reduce((m, l) => m + l.animations.length, 0);
|
|
350
|
+
this.animations.splice(o, 0, ...c);
|
|
317
351
|
}
|
|
318
352
|
this.applyOffsets(), this.ready = Promise.all(this.animationGroups.map((i) => i.ready)).then(() => {
|
|
319
353
|
});
|
|
@@ -323,49 +357,49 @@ class Et extends O {
|
|
|
323
357
|
* stagger offsets for remaining groups. Cancelled animations in removed
|
|
324
358
|
* groups are returned.
|
|
325
359
|
*/
|
|
326
|
-
removeGroups(
|
|
360
|
+
removeGroups(e) {
|
|
327
361
|
const n = [], i = [], s = [];
|
|
328
362
|
for (let r = 0; r < this.animationGroups.length; r++)
|
|
329
|
-
|
|
363
|
+
e(this.animationGroups[r]) ? n.push(this.animationGroups[r]) : (i.push(this.animationGroups[r]), s.push(this.timingOptions[r]));
|
|
330
364
|
if (n.length === 0) return n;
|
|
331
365
|
for (const r of n)
|
|
332
366
|
r.cancel();
|
|
333
367
|
return this.animationGroups = i, this.timingOptions = s, this.animations = i.flatMap((r) => [...r.animations]), this.applyOffsets(), this.ready = Promise.all(this.animationGroups.map((r) => r.ready)).then(() => {
|
|
334
368
|
}), n;
|
|
335
369
|
}
|
|
336
|
-
async onFinish(
|
|
370
|
+
async onFinish(e) {
|
|
337
371
|
try {
|
|
338
|
-
await Promise.all(this.animationGroups.map((n) => n.finished)),
|
|
372
|
+
await Promise.all(this.animationGroups.map((n) => n.finished)), e();
|
|
339
373
|
} catch (n) {
|
|
340
374
|
console.warn("animation was interrupted - aborting onFinish callback - ", n);
|
|
341
375
|
}
|
|
342
376
|
}
|
|
343
377
|
}
|
|
344
|
-
class
|
|
378
|
+
class kt {
|
|
345
379
|
_animation;
|
|
346
380
|
customEffect;
|
|
347
381
|
progress;
|
|
348
382
|
_tickCbId;
|
|
349
383
|
_finishHandler;
|
|
350
|
-
constructor(
|
|
384
|
+
constructor(e, n, i, s) {
|
|
351
385
|
const r = new KeyframeEffect(n, [], {
|
|
352
386
|
...i,
|
|
353
387
|
composite: "add"
|
|
354
388
|
}), { timeline: c } = s;
|
|
355
|
-
this._animation = new Animation(r, c), this._tickCbId = null, this.progress = null, this.customEffect = (
|
|
389
|
+
this._animation = new Animation(r, c), this._tickCbId = null, this.progress = null, this.customEffect = (o) => e(r.target, o), this._finishHandler = (o) => {
|
|
356
390
|
this.effect.target?.getAnimations().find((m) => m === this._animation) || this.cancel();
|
|
357
391
|
}, this.addEventListener("finish", this._finishHandler), this.addEventListener("remove", this._finishHandler);
|
|
358
392
|
}
|
|
359
393
|
// private tick method for customEffect loop implementation
|
|
360
394
|
_tick() {
|
|
361
395
|
try {
|
|
362
|
-
const
|
|
363
|
-
|
|
396
|
+
const e = this.effect?.getComputedTiming().progress ?? null;
|
|
397
|
+
e !== this.progress && (this.customEffect?.(e), this.progress = e), this._tickCbId = requestAnimationFrame(() => {
|
|
364
398
|
this._tick();
|
|
365
399
|
});
|
|
366
|
-
} catch (
|
|
400
|
+
} catch (e) {
|
|
367
401
|
this._tickCbId = null, console.error(
|
|
368
|
-
`failed to run customEffect! effectId: ${this.id}, error: ${
|
|
402
|
+
`failed to run customEffect! effectId: ${this.id}, error: ${e instanceof Error ? e.message : e}`
|
|
369
403
|
);
|
|
370
404
|
}
|
|
371
405
|
}
|
|
@@ -373,39 +407,39 @@ class _t {
|
|
|
373
407
|
get currentTime() {
|
|
374
408
|
return this._animation.currentTime;
|
|
375
409
|
}
|
|
376
|
-
set currentTime(
|
|
377
|
-
this._animation.currentTime =
|
|
410
|
+
set currentTime(e) {
|
|
411
|
+
this._animation.currentTime = e;
|
|
378
412
|
}
|
|
379
413
|
get startTime() {
|
|
380
414
|
return this._animation.startTime;
|
|
381
415
|
}
|
|
382
|
-
set startTime(
|
|
383
|
-
this._animation.startTime =
|
|
416
|
+
set startTime(e) {
|
|
417
|
+
this._animation.startTime = e;
|
|
384
418
|
}
|
|
385
419
|
get playbackRate() {
|
|
386
420
|
return this._animation.playbackRate;
|
|
387
421
|
}
|
|
388
|
-
set playbackRate(
|
|
389
|
-
this._animation.playbackRate =
|
|
422
|
+
set playbackRate(e) {
|
|
423
|
+
this._animation.playbackRate = e;
|
|
390
424
|
}
|
|
391
425
|
// Animation basic properties
|
|
392
426
|
get id() {
|
|
393
427
|
return this._animation.id;
|
|
394
428
|
}
|
|
395
|
-
set id(
|
|
396
|
-
this._animation.id =
|
|
429
|
+
set id(e) {
|
|
430
|
+
this._animation.id = e;
|
|
397
431
|
}
|
|
398
432
|
get effect() {
|
|
399
433
|
return this._animation.effect;
|
|
400
434
|
}
|
|
401
|
-
set effect(
|
|
402
|
-
this._animation.effect =
|
|
435
|
+
set effect(e) {
|
|
436
|
+
this._animation.effect = e;
|
|
403
437
|
}
|
|
404
438
|
get timeline() {
|
|
405
439
|
return this._animation.timeline;
|
|
406
440
|
}
|
|
407
|
-
set timeline(
|
|
408
|
-
this._animation.timeline =
|
|
441
|
+
set timeline(e) {
|
|
442
|
+
this._animation.timeline = e;
|
|
409
443
|
}
|
|
410
444
|
// Animation readonly state properties
|
|
411
445
|
get finished() {
|
|
@@ -427,20 +461,20 @@ class _t {
|
|
|
427
461
|
get oncancel() {
|
|
428
462
|
return this._animation.oncancel;
|
|
429
463
|
}
|
|
430
|
-
set oncancel(
|
|
431
|
-
this._animation.oncancel =
|
|
464
|
+
set oncancel(e) {
|
|
465
|
+
this._animation.oncancel = e;
|
|
432
466
|
}
|
|
433
467
|
get onfinish() {
|
|
434
468
|
return this._animation.onfinish;
|
|
435
469
|
}
|
|
436
|
-
set onfinish(
|
|
437
|
-
this._animation.onfinish =
|
|
470
|
+
set onfinish(e) {
|
|
471
|
+
this._animation.onfinish = e;
|
|
438
472
|
}
|
|
439
473
|
get onremove() {
|
|
440
474
|
return this._animation.onremove;
|
|
441
475
|
}
|
|
442
|
-
set onremove(
|
|
443
|
-
this._animation.onremove =
|
|
476
|
+
set onremove(e) {
|
|
477
|
+
this._animation.onremove = e;
|
|
444
478
|
}
|
|
445
479
|
// CustomAnimation overridden methods
|
|
446
480
|
play() {
|
|
@@ -467,34 +501,34 @@ class _t {
|
|
|
467
501
|
reverse() {
|
|
468
502
|
this._animation.reverse();
|
|
469
503
|
}
|
|
470
|
-
updatePlaybackRate(
|
|
471
|
-
this._animation.updatePlaybackRate(
|
|
504
|
+
updatePlaybackRate(e) {
|
|
505
|
+
this._animation.updatePlaybackRate(e);
|
|
472
506
|
}
|
|
473
507
|
// Animation events API
|
|
474
|
-
addEventListener(
|
|
475
|
-
this._animation.addEventListener(
|
|
508
|
+
addEventListener(e, n, i) {
|
|
509
|
+
this._animation.addEventListener(e, n, i);
|
|
476
510
|
}
|
|
477
|
-
removeEventListener(
|
|
478
|
-
this._animation.removeEventListener(
|
|
511
|
+
removeEventListener(e, n, i) {
|
|
512
|
+
this._animation.removeEventListener(e, n, i);
|
|
479
513
|
}
|
|
480
|
-
dispatchEvent(
|
|
481
|
-
return this._animation.dispatchEvent(
|
|
514
|
+
dispatchEvent(e) {
|
|
515
|
+
return this._animation.dispatchEvent(e);
|
|
482
516
|
}
|
|
483
517
|
}
|
|
484
|
-
function
|
|
485
|
-
return
|
|
518
|
+
function $t(t) {
|
|
519
|
+
return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
|
|
486
520
|
}
|
|
487
|
-
var
|
|
488
|
-
function
|
|
489
|
-
return
|
|
490
|
-
(function(
|
|
521
|
+
var I = { exports: {} }, F = I.exports, N;
|
|
522
|
+
function Pt() {
|
|
523
|
+
return N || (N = 1, (function(t) {
|
|
524
|
+
(function(e) {
|
|
491
525
|
var n = function() {
|
|
492
|
-
}, i =
|
|
493
|
-
return setTimeout(
|
|
526
|
+
}, i = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.msRequestAnimationFrame || function(a) {
|
|
527
|
+
return setTimeout(a, 16);
|
|
494
528
|
};
|
|
495
529
|
function s() {
|
|
496
|
-
var
|
|
497
|
-
|
|
530
|
+
var a = this;
|
|
531
|
+
a.reads = [], a.writes = [], a.raf = i.bind(e);
|
|
498
532
|
}
|
|
499
533
|
s.prototype = {
|
|
500
534
|
constructor: s,
|
|
@@ -506,8 +540,8 @@ function It() {
|
|
|
506
540
|
*
|
|
507
541
|
* @param {Array} tasks
|
|
508
542
|
*/
|
|
509
|
-
runTasks: function(
|
|
510
|
-
for (var u; u =
|
|
543
|
+
runTasks: function(a) {
|
|
544
|
+
for (var u; u = a.shift(); ) u();
|
|
511
545
|
},
|
|
512
546
|
/**
|
|
513
547
|
* Adds a job to the read batch and
|
|
@@ -517,8 +551,8 @@ function It() {
|
|
|
517
551
|
* @param {Object} ctx the context to be bound to `fn` (optional).
|
|
518
552
|
* @public
|
|
519
553
|
*/
|
|
520
|
-
measure: function(
|
|
521
|
-
var f = u ?
|
|
554
|
+
measure: function(a, u) {
|
|
555
|
+
var f = u ? a.bind(u) : a;
|
|
522
556
|
return this.reads.push(f), r(this), f;
|
|
523
557
|
},
|
|
524
558
|
/**
|
|
@@ -530,8 +564,8 @@ function It() {
|
|
|
530
564
|
* @param {Object} ctx the context to be bound to `fn` (optional).
|
|
531
565
|
* @public
|
|
532
566
|
*/
|
|
533
|
-
mutate: function(
|
|
534
|
-
var f = u ?
|
|
567
|
+
mutate: function(a, u) {
|
|
568
|
+
var f = u ? a.bind(u) : a;
|
|
535
569
|
return this.writes.push(f), r(this), f;
|
|
536
570
|
},
|
|
537
571
|
/**
|
|
@@ -541,8 +575,8 @@ function It() {
|
|
|
541
575
|
* @return {Boolean} success
|
|
542
576
|
* @public
|
|
543
577
|
*/
|
|
544
|
-
clear: function(
|
|
545
|
-
return
|
|
578
|
+
clear: function(a) {
|
|
579
|
+
return o(this.reads, a) || o(this.writes, a);
|
|
546
580
|
},
|
|
547
581
|
/**
|
|
548
582
|
* Extend this FastDom with some
|
|
@@ -578,194 +612,196 @@ function It() {
|
|
|
578
612
|
* @param {Object} props properties to mixin
|
|
579
613
|
* @return {FastDom}
|
|
580
614
|
*/
|
|
581
|
-
extend: function(
|
|
582
|
-
if (typeof
|
|
615
|
+
extend: function(a) {
|
|
616
|
+
if (typeof a != "object") throw new Error("expected object");
|
|
583
617
|
var u = Object.create(this);
|
|
584
|
-
return m(u,
|
|
618
|
+
return m(u, a), u.fastdom = this, u.initialize && u.initialize(), u;
|
|
585
619
|
},
|
|
586
620
|
// override this with a function
|
|
587
621
|
// to prevent Errors in console
|
|
588
622
|
// when tasks throw
|
|
589
623
|
catch: null
|
|
590
624
|
};
|
|
591
|
-
function r(
|
|
592
|
-
|
|
625
|
+
function r(a) {
|
|
626
|
+
a.scheduled || (a.scheduled = !0, a.raf(c.bind(null, a)));
|
|
593
627
|
}
|
|
594
|
-
function c(
|
|
595
|
-
var u =
|
|
628
|
+
function c(a) {
|
|
629
|
+
var u = a.writes, f = a.reads, p;
|
|
596
630
|
try {
|
|
597
|
-
n("flushing reads", f.length),
|
|
631
|
+
n("flushing reads", f.length), a.runTasks(f), n("flushing writes", u.length), a.runTasks(u);
|
|
598
632
|
} catch (h) {
|
|
599
633
|
p = h;
|
|
600
634
|
}
|
|
601
|
-
if (
|
|
602
|
-
if (n("task errored", p.message),
|
|
635
|
+
if (a.scheduled = !1, (f.length || u.length) && r(a), p)
|
|
636
|
+
if (n("task errored", p.message), a.catch) a.catch(p);
|
|
603
637
|
else throw p;
|
|
604
638
|
}
|
|
605
|
-
function a
|
|
606
|
-
var f =
|
|
607
|
-
return !!~f && !!
|
|
639
|
+
function o(a, u) {
|
|
640
|
+
var f = a.indexOf(u);
|
|
641
|
+
return !!~f && !!a.splice(f, 1);
|
|
608
642
|
}
|
|
609
|
-
function m(
|
|
643
|
+
function m(a, u) {
|
|
610
644
|
for (var f in u)
|
|
611
|
-
u.hasOwnProperty(f) && (
|
|
645
|
+
u.hasOwnProperty(f) && (a[f] = u[f]);
|
|
612
646
|
}
|
|
613
|
-
var l =
|
|
614
|
-
|
|
647
|
+
var l = e.fastdom = e.fastdom || new s();
|
|
648
|
+
t.exports = l;
|
|
615
649
|
})(typeof window < "u" ? window : typeof F < "u" ? F : globalThis);
|
|
616
|
-
})(
|
|
650
|
+
})(I)), I.exports;
|
|
617
651
|
}
|
|
618
|
-
var
|
|
619
|
-
const E = /* @__PURE__ */
|
|
620
|
-
function
|
|
621
|
-
Object.assign($,
|
|
652
|
+
var St = Pt();
|
|
653
|
+
const E = /* @__PURE__ */ $t(St), $ = {};
|
|
654
|
+
function Ht(t) {
|
|
655
|
+
Object.assign($, t);
|
|
622
656
|
}
|
|
623
|
-
function
|
|
624
|
-
return
|
|
625
|
-
`${
|
|
657
|
+
function qt(t) {
|
|
658
|
+
return t in $ ? $[t] : (console.warn(
|
|
659
|
+
`${t} not found in registry. Please make sure to import and register the preset.`
|
|
626
660
|
), null);
|
|
627
661
|
}
|
|
628
|
-
function w(
|
|
629
|
-
return
|
|
662
|
+
function w(t, e) {
|
|
663
|
+
return t ? (e || document).getElementById(t) : null;
|
|
630
664
|
}
|
|
631
|
-
function
|
|
632
|
-
return
|
|
665
|
+
function zt(t, e) {
|
|
666
|
+
return t?.matches(`[data-motion-part~="${e}"]`) ? t : t?.querySelector(`[data-motion-part~="${e}"]`);
|
|
633
667
|
}
|
|
634
|
-
function
|
|
635
|
-
const
|
|
636
|
-
return
|
|
668
|
+
function Ct(t) {
|
|
669
|
+
const e = t.alternate ? "alternate" : "";
|
|
670
|
+
return t.reversed ? `${e ? `${e}-` : ""}reverse` : e || "normal";
|
|
637
671
|
}
|
|
638
|
-
function k(
|
|
639
|
-
return `${
|
|
672
|
+
function k(t) {
|
|
673
|
+
return `${t.value}${gt(t.unit)}`;
|
|
640
674
|
}
|
|
641
|
-
function
|
|
642
|
-
return `${
|
|
675
|
+
function x(t, e, n) {
|
|
676
|
+
return `${t.name || "cover"} ${n && t.offset.unit !== "percentage" ? `calc(100% + ${k(t.offset)}${e ? ` + ${e}` : ""})` : e ? `calc(${k(t.offset)} + ${e})` : k(t.offset)}`;
|
|
643
677
|
}
|
|
644
|
-
function
|
|
678
|
+
function j(t) {
|
|
645
679
|
return {
|
|
646
|
-
start:
|
|
647
|
-
end:
|
|
680
|
+
start: x(t.startOffset, t.startOffsetAdd),
|
|
681
|
+
end: x(t.endOffset, t.endOffsetAdd, !0)
|
|
648
682
|
};
|
|
649
683
|
}
|
|
650
|
-
function L(
|
|
651
|
-
return (
|
|
684
|
+
function L(t) {
|
|
685
|
+
return (e) => E.measure(() => e(t));
|
|
652
686
|
}
|
|
653
|
-
function
|
|
654
|
-
return (
|
|
687
|
+
function W(t) {
|
|
688
|
+
return (e) => E.mutate(() => e(t));
|
|
655
689
|
}
|
|
656
|
-
function
|
|
657
|
-
if (
|
|
658
|
-
const
|
|
659
|
-
return typeof
|
|
660
|
-
} else if (
|
|
661
|
-
const
|
|
690
|
+
function A(t) {
|
|
691
|
+
if (t.namedEffect) {
|
|
692
|
+
const e = t.namedEffect.type;
|
|
693
|
+
return typeof e == "string" ? qt(e) : null;
|
|
694
|
+
} else if (t.keyframeEffect) {
|
|
695
|
+
const e = (i) => {
|
|
662
696
|
const { name: s, keyframes: r } = i.keyframeEffect;
|
|
663
697
|
return [{ ...i, name: s, keyframes: r }];
|
|
664
698
|
};
|
|
665
|
-
return { web:
|
|
699
|
+
return { web: e, style: e, getNames: (i) => {
|
|
666
700
|
const { effectId: s } = i, { name: r } = i.keyframeEffect, c = r || s;
|
|
667
701
|
return c ? [c] : [];
|
|
668
702
|
} };
|
|
669
|
-
} else if (
|
|
670
|
-
return (
|
|
703
|
+
} else if (t.customEffect)
|
|
704
|
+
return (e) => [{ ...e, keyframes: [] }];
|
|
671
705
|
return null;
|
|
672
706
|
}
|
|
673
|
-
function H(
|
|
674
|
-
return
|
|
707
|
+
function H(t, e, n, i) {
|
|
708
|
+
return t.map((s, r) => {
|
|
675
709
|
const c = {
|
|
676
710
|
fill: s.fill,
|
|
677
|
-
easing:
|
|
711
|
+
easing: wt(s.easing),
|
|
678
712
|
iterations: s.iterations === 0 ? 1 / 0 : s.iterations || 1,
|
|
679
713
|
composite: s.composite,
|
|
680
|
-
direction:
|
|
714
|
+
direction: Ct(s)
|
|
681
715
|
};
|
|
682
|
-
|
|
683
|
-
|
|
716
|
+
P(e) ? (c.duration = s.duration, c.delay = s.delay || 0) : e?.trigger === "view-progress" && (i || window.ViewTimeline) ? c.duration = "auto" : (c.duration = 99.99, c.delay = 0.01);
|
|
717
|
+
const o = _t(s.keyframes);
|
|
718
|
+
return {
|
|
719
|
+
effect: o === s.keyframes ? s : { ...s, keyframes: o },
|
|
684
720
|
options: c,
|
|
685
721
|
id: n && `${n}-${r + 1}`,
|
|
686
722
|
part: s.part
|
|
687
723
|
};
|
|
688
724
|
});
|
|
689
725
|
}
|
|
690
|
-
function
|
|
691
|
-
return !
|
|
726
|
+
function P(t) {
|
|
727
|
+
return !t || t.trigger !== "pointer-move" && t.trigger !== "view-progress";
|
|
692
728
|
}
|
|
693
|
-
function
|
|
694
|
-
if (
|
|
695
|
-
if (
|
|
696
|
-
if (
|
|
697
|
-
|
|
729
|
+
function M(t, e, n, i, s) {
|
|
730
|
+
if (t) {
|
|
731
|
+
if (P(i) && (e.duration = e.duration || 1, s?.reducedMotion))
|
|
732
|
+
if (e.iterations === 1 || e.iterations == null)
|
|
733
|
+
e = { ...e, duration: 1 };
|
|
698
734
|
else
|
|
699
735
|
return [];
|
|
700
736
|
let r;
|
|
701
|
-
return n instanceof HTMLElement && (r = { measure: L(n), mutate:
|
|
737
|
+
return n instanceof HTMLElement && (r = { measure: L(n), mutate: W(n) }), t.web ? t.web(e, r, s) : t(e, r, s);
|
|
702
738
|
}
|
|
703
739
|
return [];
|
|
704
740
|
}
|
|
705
|
-
function
|
|
706
|
-
const r = typeof
|
|
707
|
-
if (n?.trigger === "pointer-move" && !
|
|
708
|
-
let f =
|
|
709
|
-
|
|
710
|
-
...
|
|
741
|
+
function K(t, e, n, i, s) {
|
|
742
|
+
const r = typeof t == "string" ? w(t, s) : t;
|
|
743
|
+
if (n?.trigger === "pointer-move" && !e.keyframeEffect) {
|
|
744
|
+
let f = e;
|
|
745
|
+
e.customEffect && (f = {
|
|
746
|
+
...e,
|
|
711
747
|
namedEffect: { id: "", type: "CustomMouse" }
|
|
712
748
|
});
|
|
713
|
-
const p =
|
|
749
|
+
const p = A(
|
|
714
750
|
f
|
|
715
|
-
), h =
|
|
751
|
+
), h = M(
|
|
716
752
|
p,
|
|
717
|
-
|
|
753
|
+
e,
|
|
718
754
|
r,
|
|
719
755
|
n,
|
|
720
756
|
i
|
|
721
757
|
);
|
|
722
758
|
return typeof h != "function" ? null : h(r);
|
|
723
759
|
}
|
|
724
|
-
const c =
|
|
760
|
+
const c = A(e), o = M(
|
|
725
761
|
c,
|
|
726
|
-
|
|
762
|
+
e,
|
|
727
763
|
r,
|
|
728
764
|
n,
|
|
729
765
|
i
|
|
730
766
|
);
|
|
731
|
-
if (!
|
|
767
|
+
if (!o || o.length === 0)
|
|
732
768
|
return null;
|
|
733
|
-
const m = H(
|
|
769
|
+
const m = H(o, n, e.effectId);
|
|
734
770
|
let l;
|
|
735
|
-
const
|
|
736
|
-
|
|
771
|
+
const a = n?.trigger === "view-progress";
|
|
772
|
+
a && window.ViewTimeline && (l = new ViewTimeline({
|
|
737
773
|
subject: n.element || w(n.componentId)
|
|
738
774
|
}));
|
|
739
775
|
const u = m.map(({ effect: f, options: p, id: h, part: d }) => {
|
|
740
|
-
const v = d ?
|
|
776
|
+
const v = d ? zt(r, d) : r, g = new KeyframeEffect(v || null, [], p);
|
|
741
777
|
E.mutate(() => {
|
|
742
778
|
"timing" in f && g.updateTiming(f.timing), g.setKeyframes(f.keyframes);
|
|
743
779
|
});
|
|
744
|
-
const y =
|
|
780
|
+
const y = a && l ? { timeline: l } : {}, b = typeof f.customEffect == "function" ? new kt(
|
|
745
781
|
f.customEffect,
|
|
746
782
|
v || null,
|
|
747
783
|
p,
|
|
748
784
|
y
|
|
749
785
|
) : new Animation(g, y.timeline);
|
|
750
|
-
if (
|
|
786
|
+
if (a)
|
|
751
787
|
if (l)
|
|
752
788
|
E.mutate(() => {
|
|
753
|
-
const { start: _, end: T } =
|
|
789
|
+
const { start: _, end: T } = j(f);
|
|
754
790
|
b.rangeStart = _, b.rangeEnd = T, b.play();
|
|
755
791
|
});
|
|
756
792
|
else {
|
|
757
|
-
const { startOffset: _, endOffset: T } =
|
|
793
|
+
const { startOffset: _, endOffset: T } = e;
|
|
758
794
|
E.mutate(() => {
|
|
759
|
-
const
|
|
795
|
+
const S = f.startOffset || _, q = f.endOffset || T;
|
|
760
796
|
Object.assign(b, {
|
|
761
797
|
start: {
|
|
762
|
-
name:
|
|
763
|
-
offset:
|
|
798
|
+
name: S.name,
|
|
799
|
+
offset: S.offset?.value,
|
|
764
800
|
add: f.startOffsetAdd
|
|
765
801
|
},
|
|
766
802
|
end: {
|
|
767
|
-
name:
|
|
768
|
-
offset:
|
|
803
|
+
name: q.name,
|
|
804
|
+
offset: q.offset?.value,
|
|
769
805
|
add: f.endOffsetAdd
|
|
770
806
|
}
|
|
771
807
|
});
|
|
@@ -774,75 +810,75 @@ function W(e, t, n, i, s) {
|
|
|
774
810
|
return h && (b.id = h), b;
|
|
775
811
|
});
|
|
776
812
|
return new O(u, {
|
|
777
|
-
...
|
|
813
|
+
...e,
|
|
778
814
|
trigger: { ...n || {} },
|
|
779
815
|
// make sure the group is ready after all animation targets are measured and mutated
|
|
780
816
|
measured: new Promise((f) => E.mutate(f))
|
|
781
817
|
});
|
|
782
818
|
}
|
|
783
|
-
function
|
|
784
|
-
return
|
|
819
|
+
function Ft(t, e) {
|
|
820
|
+
return t ? `#${t}${e ? `[data-motion-part~="${e}"]` : ""}` : "";
|
|
785
821
|
}
|
|
786
|
-
function
|
|
787
|
-
const { duration: n, delay: i, iterations: s = 1, fill: r, easing: c = "linear", direction:
|
|
788
|
-
return `${m} ${l ? "auto" : `${n}ms`}${l ? " " : ` ${i ?? 0}ms `}${c}${r && r !== "none" ? ` ${r}` : ""} ${!s || s === 1 / 0 ? "infinite" : s}${
|
|
822
|
+
function Nt(t, e) {
|
|
823
|
+
const { duration: n, delay: i, iterations: s = 1, fill: r, easing: c = "linear", direction: o } = t.options, m = t.effect.name, l = n === "auto";
|
|
824
|
+
return `${m} ${l ? "auto" : `${n}ms`}${l ? " " : ` ${i ?? 0}ms `}${c}${r && r !== "none" ? ` ${r}` : ""} ${!s || s === 1 / 0 ? "infinite" : s}${o === "normal" ? "" : ` ${o}`} ${e ? "" : "paused"}`;
|
|
789
825
|
}
|
|
790
|
-
function
|
|
791
|
-
return
|
|
826
|
+
function xt(t, e, n) {
|
|
827
|
+
return t?.style ? (P(n) && (e.duration = e.duration || 1), t.style(e)) : [];
|
|
792
828
|
}
|
|
793
|
-
function
|
|
794
|
-
const i =
|
|
795
|
-
return r.map((
|
|
796
|
-
const { start: l, end:
|
|
829
|
+
function Kt(t, e, n) {
|
|
830
|
+
const i = A(e), s = xt(i, e), r = H(s, n, e.effectId, !0), c = n?.trigger === "view-progress";
|
|
831
|
+
return r.map((o, m) => {
|
|
832
|
+
const { start: l, end: a } = c ? j(o.effect) : {};
|
|
797
833
|
return {
|
|
798
|
-
target:
|
|
799
|
-
animation:
|
|
800
|
-
composition:
|
|
801
|
-
custom:
|
|
802
|
-
name:
|
|
803
|
-
keyframes:
|
|
804
|
-
id:
|
|
834
|
+
target: Ft(t, o.part),
|
|
835
|
+
animation: Nt(o, c),
|
|
836
|
+
composition: o.options.composite,
|
|
837
|
+
custom: o.effect.custom,
|
|
838
|
+
name: o.effect.name,
|
|
839
|
+
keyframes: o.effect.keyframes,
|
|
840
|
+
id: o.id && `${o.id}-${m + 1}`,
|
|
805
841
|
animationTimeline: c ? `--${n?.id}` : "",
|
|
806
|
-
animationRange: l ||
|
|
842
|
+
animationRange: l || a ? `${l} ${a}` : ""
|
|
807
843
|
};
|
|
808
844
|
});
|
|
809
845
|
}
|
|
810
|
-
function
|
|
811
|
-
const i =
|
|
846
|
+
function Mt(t, e, n) {
|
|
847
|
+
const i = A(e), s = t instanceof HTMLElement ? t : w(t);
|
|
812
848
|
if (i && i.prepare && s) {
|
|
813
|
-
const r = { measure: L(s), mutate:
|
|
814
|
-
i.prepare(
|
|
849
|
+
const r = { measure: L(s), mutate: W(s) };
|
|
850
|
+
i.prepare(e, r);
|
|
815
851
|
}
|
|
816
852
|
n && E.mutate(n);
|
|
817
853
|
}
|
|
818
|
-
function
|
|
819
|
-
const n =
|
|
854
|
+
function Gt(t, e) {
|
|
855
|
+
const n = A(e);
|
|
820
856
|
if (!n)
|
|
821
857
|
return null;
|
|
822
858
|
if (!n.style)
|
|
823
|
-
return
|
|
824
|
-
const i = n.getNames(
|
|
859
|
+
return e.effectId && t ? Rt(t, e.effectId) : null;
|
|
860
|
+
const i = n.getNames(e), r = (typeof t == "string" ? w(t) : t)?.getAnimations(), c = r?.map((m) => m.animationName) || [], o = [];
|
|
825
861
|
return i.forEach((m) => {
|
|
826
|
-
c.includes(m) &&
|
|
862
|
+
c.includes(m) && o.push(
|
|
827
863
|
r?.find((l) => l.animationName === m)
|
|
828
864
|
);
|
|
829
|
-
}),
|
|
865
|
+
}), o?.length ? new O(o) : null;
|
|
830
866
|
}
|
|
831
|
-
function
|
|
832
|
-
const i = (typeof
|
|
867
|
+
function Rt(t, e) {
|
|
868
|
+
const i = (typeof t == "string" ? w(t) : t)?.getAnimations().filter((s) => {
|
|
833
869
|
const r = s.id || s.animationName;
|
|
834
|
-
return r ? r.startsWith(
|
|
870
|
+
return r ? r.startsWith(e) : !0;
|
|
835
871
|
});
|
|
836
872
|
return i?.length ? new O(i) : null;
|
|
837
873
|
}
|
|
838
|
-
function
|
|
839
|
-
const { disabled: s, allowActiveEvent: r, ...c } = i,
|
|
840
|
-
if (!
|
|
874
|
+
function Vt(t, e, n, i = {}) {
|
|
875
|
+
const { disabled: s, allowActiveEvent: r, ...c } = i, o = K(t, e, n, c);
|
|
876
|
+
if (!o)
|
|
841
877
|
return null;
|
|
842
878
|
let m = {};
|
|
843
879
|
if (n.trigger === "view-progress" && !window.ViewTimeline) {
|
|
844
|
-
const l = n.element || w(n.componentId), { ready:
|
|
845
|
-
return
|
|
880
|
+
const l = n.element || w(n.componentId), { ready: a } = o;
|
|
881
|
+
return o.animations.map((u) => ({
|
|
846
882
|
/* we use getters for start and end in order to access the animation's start and end
|
|
847
883
|
only when initializing the scrub scene rather than immediately */
|
|
848
884
|
get start() {
|
|
@@ -852,9 +888,9 @@ function Dt(e, t, n, i = {}) {
|
|
|
852
888
|
return u.end;
|
|
853
889
|
},
|
|
854
890
|
viewSource: l,
|
|
855
|
-
ready:
|
|
891
|
+
ready: a,
|
|
856
892
|
getProgress() {
|
|
857
|
-
return
|
|
893
|
+
return o.getProgress();
|
|
858
894
|
},
|
|
859
895
|
effect(f, p) {
|
|
860
896
|
const { activeDuration: h } = u.effect.getComputedTiming(), { delay: d } = u.effect.getTiming();
|
|
@@ -866,12 +902,12 @@ function Dt(e, t, n, i = {}) {
|
|
|
866
902
|
}
|
|
867
903
|
}));
|
|
868
904
|
} else if (n.trigger === "pointer-move") {
|
|
869
|
-
const l =
|
|
905
|
+
const l = e, { centeredToTarget: a, transitionDuration: u, transitionEasing: f } = l, p = n.axis;
|
|
870
906
|
if (l.keyframeEffect) {
|
|
871
|
-
const h =
|
|
907
|
+
const h = o;
|
|
872
908
|
return h.animations?.length === 0 ? null : {
|
|
873
909
|
target: void 0,
|
|
874
|
-
centeredToTarget:
|
|
910
|
+
centeredToTarget: a,
|
|
875
911
|
ready: h.ready,
|
|
876
912
|
_currentProgress: 0,
|
|
877
913
|
getProgress() {
|
|
@@ -888,100 +924,103 @@ function Dt(e, t, n, i = {}) {
|
|
|
888
924
|
};
|
|
889
925
|
}
|
|
890
926
|
m = {
|
|
891
|
-
centeredToTarget:
|
|
927
|
+
centeredToTarget: a,
|
|
892
928
|
allowActiveEvent: r
|
|
893
|
-
},
|
|
929
|
+
}, e.customEffect && u && (m.transitionDuration = u, m.transitionEasing = D(f)), m.target = o.target;
|
|
894
930
|
}
|
|
895
931
|
return {
|
|
896
932
|
...m,
|
|
897
933
|
getProgress() {
|
|
898
|
-
return
|
|
934
|
+
return o.getProgress();
|
|
899
935
|
},
|
|
900
|
-
effect(l,
|
|
901
|
-
|
|
936
|
+
effect(l, a, u, f) {
|
|
937
|
+
o.progress(
|
|
902
938
|
u ? {
|
|
903
939
|
// @ts-expect-error spread error on p
|
|
904
|
-
...
|
|
940
|
+
...a,
|
|
905
941
|
v: u,
|
|
906
942
|
active: f
|
|
907
|
-
} :
|
|
943
|
+
} : a
|
|
908
944
|
);
|
|
909
945
|
},
|
|
910
946
|
disabled: s,
|
|
911
947
|
destroy() {
|
|
912
|
-
|
|
948
|
+
o.cancel();
|
|
913
949
|
}
|
|
914
950
|
};
|
|
915
951
|
}
|
|
916
|
-
function
|
|
917
|
-
const s =
|
|
952
|
+
function Dt(t, e, n, i = !1) {
|
|
953
|
+
const s = Gt(t, e);
|
|
918
954
|
return s ? (s.ready = new Promise((r) => {
|
|
919
|
-
|
|
920
|
-
}), s) :
|
|
955
|
+
Mt(t, e, r);
|
|
956
|
+
}), s) : K(t, e, n, { reducedMotion: i });
|
|
921
957
|
}
|
|
922
|
-
function
|
|
923
|
-
return
|
|
958
|
+
function jt(t) {
|
|
959
|
+
return t === null ? [null] : typeof t == "string" ? Array.from(document.querySelectorAll(t)) : Array.isArray(t) ? t : [t];
|
|
924
960
|
}
|
|
925
|
-
function
|
|
961
|
+
function Lt(t, e) {
|
|
926
962
|
const n = [];
|
|
927
|
-
for (const { target: i, options: s } of
|
|
928
|
-
const r =
|
|
963
|
+
for (const { target: i, options: s } of t) {
|
|
964
|
+
const r = jt(i);
|
|
929
965
|
for (const c of r) {
|
|
930
|
-
const
|
|
966
|
+
const o = Dt(
|
|
931
967
|
c,
|
|
932
968
|
s,
|
|
933
969
|
void 0,
|
|
934
|
-
|
|
970
|
+
e?.reducedMotion
|
|
935
971
|
);
|
|
936
|
-
|
|
972
|
+
o instanceof O && n.push(o);
|
|
937
973
|
}
|
|
938
974
|
}
|
|
939
975
|
return n;
|
|
940
976
|
}
|
|
941
|
-
function
|
|
942
|
-
const i =
|
|
943
|
-
return new
|
|
977
|
+
function Bt(t, e, n) {
|
|
978
|
+
const i = Lt(e, n);
|
|
979
|
+
return new Tt(i, t);
|
|
944
980
|
}
|
|
945
981
|
export {
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
982
|
+
ht as backIn,
|
|
983
|
+
pt as backInOut,
|
|
984
|
+
dt as backOut,
|
|
985
|
+
ft as circIn,
|
|
986
|
+
lt as circInOut,
|
|
987
|
+
mt as circOut,
|
|
988
|
+
Lt as createAnimationGroups,
|
|
989
|
+
C as cssEasings,
|
|
990
|
+
J as cubicIn,
|
|
991
|
+
tt as cubicInOut,
|
|
956
992
|
Q as cubicOut,
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
961
|
-
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
|
|
965
|
-
|
|
993
|
+
at as expoIn,
|
|
994
|
+
ut as expoInOut,
|
|
995
|
+
ct as expoOut,
|
|
996
|
+
Dt as getAnimation,
|
|
997
|
+
Kt as getCSSAnimation,
|
|
998
|
+
gt as getCssUnits,
|
|
999
|
+
wt as getEasing,
|
|
1000
|
+
Rt as getElementAnimation,
|
|
1001
|
+
Gt as getElementCSSAnimation,
|
|
966
1002
|
D as getJsEasing,
|
|
967
|
-
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
|
|
1003
|
+
Vt as getScrubScene,
|
|
1004
|
+
Bt as getSequence,
|
|
1005
|
+
K as getWebAnimation,
|
|
1006
|
+
z as jsEasings,
|
|
971
1007
|
G as linear,
|
|
972
|
-
|
|
973
|
-
|
|
974
|
-
U as
|
|
975
|
-
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
|
|
979
|
-
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
|
|
1008
|
+
_t as normalizeKeyframes,
|
|
1009
|
+
Mt as prepareAnimation,
|
|
1010
|
+
U as quadIn,
|
|
1011
|
+
Z as quadInOut,
|
|
1012
|
+
Y as quadOut,
|
|
1013
|
+
et as quartIn,
|
|
1014
|
+
it as quartInOut,
|
|
1015
|
+
nt as quartOut,
|
|
1016
|
+
st as quintIn,
|
|
1017
|
+
ot as quintInOut,
|
|
1018
|
+
rt as quintOut,
|
|
1019
|
+
Ht as registerEffects,
|
|
983
1020
|
V as sineIn,
|
|
984
|
-
|
|
985
|
-
B as sineOut
|
|
1021
|
+
X as sineInOut,
|
|
1022
|
+
B as sineOut,
|
|
1023
|
+
Wt as toCSSPropertyName,
|
|
1024
|
+
vt as toWAAPIPropertyName
|
|
986
1025
|
};
|
|
987
1026
|
//# sourceMappingURL=motion.js.map
|