@wix/motion 2.1.2 → 2.1.4
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 +126 -102
- package/dist/es/motion.js.map +1 -1
- package/dist/tsconfig.build.tsbuildinfo +1 -1
- package/dist/types/AnimationGroup.d.ts +6 -0
- package/dist/types/AnimationGroup.d.ts.map +1 -1
- package/package.json +8 -2
package/dist/es/motion.js
CHANGED
|
@@ -3,11 +3,18 @@ class I {
|
|
|
3
3
|
options;
|
|
4
4
|
ready;
|
|
5
5
|
isCSS;
|
|
6
|
+
longestAnimation;
|
|
6
7
|
constructor(e, n) {
|
|
7
|
-
this.animations = e, this.options = n, this.ready = n?.measured || Promise.resolve(), this.isCSS = e[0] instanceof CSSAnimation;
|
|
8
|
+
this.animations = e, this.options = n, this.ready = n?.measured || Promise.resolve(), this.isCSS = e[0] instanceof CSSAnimation, this.longestAnimation = this._getAnimationWithLongestEndTime();
|
|
9
|
+
}
|
|
10
|
+
_getAnimationWithLongestEndTime() {
|
|
11
|
+
return this.animations.reduce((e, n) => {
|
|
12
|
+
const i = e.effect?.getComputedTiming().endTime ?? 0, r = n.effect?.getComputedTiming().endTime ?? 0;
|
|
13
|
+
return i > r ? e : n;
|
|
14
|
+
}, this.animations[0]);
|
|
8
15
|
}
|
|
9
16
|
getProgress() {
|
|
10
|
-
return this.
|
|
17
|
+
return this.longestAnimation?.effect?.getComputedTiming().progress || 0;
|
|
11
18
|
}
|
|
12
19
|
async play(e) {
|
|
13
20
|
await this.ready;
|
|
@@ -55,6 +62,23 @@ class I {
|
|
|
55
62
|
console.warn("animation was interrupted - aborting onFinish callback - ", n);
|
|
56
63
|
}
|
|
57
64
|
}
|
|
65
|
+
async onAbort(e) {
|
|
66
|
+
try {
|
|
67
|
+
await Promise.all(this.animations.map((n) => n.finished));
|
|
68
|
+
} catch (n) {
|
|
69
|
+
if (n.name === "AbortError") {
|
|
70
|
+
const i = this.animations[0];
|
|
71
|
+
if (i && !this.isCSS) {
|
|
72
|
+
const r = i.effect?.target;
|
|
73
|
+
if (r) {
|
|
74
|
+
const s = new Event("animationcancel");
|
|
75
|
+
r.dispatchEvent(s);
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
e();
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
}
|
|
58
82
|
get finished() {
|
|
59
83
|
return Promise.all(this.animations.map((e) => e.finished));
|
|
60
84
|
}
|
|
@@ -72,9 +96,9 @@ class I {
|
|
|
72
96
|
});
|
|
73
97
|
}
|
|
74
98
|
}
|
|
75
|
-
const G = (t) => t,
|
|
99
|
+
const G = (t) => t, V = (t) => 1 - Math.cos(t * Math.PI / 2), B = (t) => Math.sin(t * Math.PI / 2), K = (t) => -(Math.cos(Math.PI * t) - 1) / 2, X = (t) => t ** 2, J = (t) => 1 - (1 - t) ** 2, U = (t) => t < 0.5 ? 2 * t ** 2 : 1 - (-2 * t + 2) ** 2 / 2, Y = (t) => t ** 3, Q = (t) => 1 - (1 - t) ** 3, Z = (t) => t < 0.5 ? 4 * t ** 3 : 1 - (-2 * t + 2) ** 3 / 2, tt = (t) => t ** 4, et = (t) => 1 - (1 - t) ** 4, nt = (t) => t < 0.5 ? 8 * t ** 4 : 1 - (-2 * t + 2) ** 4 / 2, it = (t) => t ** 5, st = (t) => 1 - (1 - t) ** 5, rt = (t) => t < 0.5 ? 16 * t ** 5 : 1 - (-2 * t + 2) ** 5 / 2, ot = (t) => t === 0 ? 0 : 2 ** (10 * t - 10), at = (t) => t === 1 ? 1 : 1 - 2 ** (-10 * t), ct = (t) => t === 0 ? 0 : t === 1 ? 1 : t < 0.5 ? 2 ** (20 * t - 10) / 2 : (2 - 2 ** (-20 * t + 10)) / 2, ut = (t) => 1 - Math.sqrt(1 - t ** 2), ft = (t) => Math.sqrt(1 - (t - 1) ** 2), mt = (t) => t < 0.5 ? (1 - Math.sqrt(1 - 4 * t ** 2)) / 2 : (Math.sqrt(-(2 * t - 3) * (2 * t - 1)) + 1) / 2, lt = (t) => 2.70158 * t ** 3 - 1.70158 * t ** 2, ht = (t) => 1 + 2.70158 * (t - 1) ** 3 + 1.70158 * (t - 1) ** 2, dt = (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, C = {
|
|
76
100
|
linear: G,
|
|
77
|
-
sineIn:
|
|
101
|
+
sineIn: V,
|
|
78
102
|
sineOut: B,
|
|
79
103
|
sineInOut: K,
|
|
80
104
|
quadIn: X,
|
|
@@ -94,11 +118,11 @@ const G = (t) => t, W = (t) => 1 - Math.cos(t * Math.PI / 2), B = (t) => Math.si
|
|
|
94
118
|
expoInOut: ct,
|
|
95
119
|
circIn: ut,
|
|
96
120
|
circOut: ft,
|
|
97
|
-
circInOut:
|
|
98
|
-
backIn:
|
|
121
|
+
circInOut: mt,
|
|
122
|
+
backIn: lt,
|
|
99
123
|
backOut: ht,
|
|
100
124
|
backInOut: dt
|
|
101
|
-
},
|
|
125
|
+
}, z = {
|
|
102
126
|
linear: "linear",
|
|
103
127
|
ease: "ease",
|
|
104
128
|
easeIn: "ease-in",
|
|
@@ -133,10 +157,10 @@ function pt(t) {
|
|
|
133
157
|
return t === "percentage" ? "%" : t || "px";
|
|
134
158
|
}
|
|
135
159
|
function gt(t) {
|
|
136
|
-
return t ?
|
|
160
|
+
return t ? z[t] || t : z.linear;
|
|
137
161
|
}
|
|
138
162
|
function yt(t, e, n, i) {
|
|
139
|
-
const r = 3 * t, s = 3 * (n - t) - r, u = 1 - r - s, a = 3 * e,
|
|
163
|
+
const r = 3 * t, s = 3 * (n - t) - r, u = 1 - r - s, a = 3 * e, m = 3 * (i - e) - a, l = 1 - a - m, o = (h) => ((u * h + s) * h + r) * h, c = (h) => ((l * h + m) * h + a) * h, f = (h) => (3 * u * h + 2 * s) * h + r;
|
|
140
164
|
function p(h) {
|
|
141
165
|
let d = h;
|
|
142
166
|
for (let y = 0; y < 8; y++) {
|
|
@@ -172,16 +196,16 @@ function vt(t) {
|
|
|
172
196
|
if (n.length === 0) return;
|
|
173
197
|
const i = [];
|
|
174
198
|
for (const u of n) {
|
|
175
|
-
const a = u.split(/\s+/),
|
|
176
|
-
if (isNaN(
|
|
177
|
-
const
|
|
199
|
+
const a = u.split(/\s+/), m = parseFloat(a[0]);
|
|
200
|
+
if (isNaN(m)) return;
|
|
201
|
+
const l = [];
|
|
178
202
|
for (let o = 1; o < a.length; o++)
|
|
179
203
|
if (a[o].endsWith("%")) {
|
|
180
204
|
const c = parseFloat(a[o]) / 100;
|
|
181
205
|
if (isNaN(c)) return;
|
|
182
|
-
|
|
206
|
+
l.push(c);
|
|
183
207
|
}
|
|
184
|
-
|
|
208
|
+
l.length === 0 ? i.push({ output: m, pos: null }) : l.length === 1 ? i.push({ output: m, pos: l[0] }) : (i.push({ output: m, pos: l[0] }), i.push({ output: m, pos: l[1] }));
|
|
185
209
|
}
|
|
186
210
|
if (i.length === 0) return;
|
|
187
211
|
i[0].pos === null && (i[0].pos = 0), i[i.length - 1].pos === null && (i[i.length - 1].pos = 1);
|
|
@@ -191,9 +215,9 @@ function vt(t) {
|
|
|
191
215
|
const u = r - 1;
|
|
192
216
|
let a = r;
|
|
193
217
|
for (; a < i.length && i[a].pos === null; ) a++;
|
|
194
|
-
const
|
|
218
|
+
const m = i[u].pos, l = i[a].pos, o = a - u;
|
|
195
219
|
for (let c = u + 1; c < a; c++)
|
|
196
|
-
i[c].pos =
|
|
220
|
+
i[c].pos = m + (l - m) * (c - u) / o;
|
|
197
221
|
r = a + 1;
|
|
198
222
|
} else
|
|
199
223
|
r++;
|
|
@@ -204,19 +228,19 @@ function vt(t) {
|
|
|
204
228
|
if (u <= s[0].pos) return s[0].output;
|
|
205
229
|
const a = s[s.length - 1];
|
|
206
230
|
if (u >= a.pos) return a.output;
|
|
207
|
-
let
|
|
208
|
-
for (;
|
|
209
|
-
const f =
|
|
210
|
-
s[f].pos <= u ?
|
|
231
|
+
let m = 0, l = s.length - 1;
|
|
232
|
+
for (; m < l - 1; ) {
|
|
233
|
+
const f = m + l >>> 1;
|
|
234
|
+
s[f].pos <= u ? m = f : l = f;
|
|
211
235
|
}
|
|
212
|
-
const o = s[
|
|
236
|
+
const o = s[m], c = s[l];
|
|
213
237
|
return c.pos === o.pos ? c.output : o.output + (c.output - o.output) * (u - o.pos) / (c.pos - o.pos);
|
|
214
238
|
};
|
|
215
239
|
}
|
|
216
240
|
function D(t) {
|
|
217
241
|
if (!t) return;
|
|
218
|
-
const e =
|
|
219
|
-
return e || (bt(t) ?? vt(t) ??
|
|
242
|
+
const e = C[t];
|
|
243
|
+
return e || (bt(t) ?? vt(t) ?? C.linear);
|
|
220
244
|
}
|
|
221
245
|
class Et extends I {
|
|
222
246
|
animationGroups;
|
|
@@ -254,7 +278,7 @@ class Et extends I {
|
|
|
254
278
|
i.animations.forEach((s, u) => {
|
|
255
279
|
const a = s.effect;
|
|
256
280
|
if (!a) return;
|
|
257
|
-
const { delay:
|
|
281
|
+
const { delay: m, duration: l, iterations: o } = this.timingOptions[r][u], c = m + e[r], f = n - (c + l * o);
|
|
258
282
|
a.updateTiming({ delay: c + this.delay, endDelay: f });
|
|
259
283
|
});
|
|
260
284
|
});
|
|
@@ -264,8 +288,8 @@ class Et extends I {
|
|
|
264
288
|
for (let i = 0; i < this.timingOptions.length; i++) {
|
|
265
289
|
const r = this.timingOptions[i].reduce((s, u) => {
|
|
266
290
|
if (!u) return s;
|
|
267
|
-
const { delay: a, duration:
|
|
268
|
-
return Math.max(s, a +
|
|
291
|
+
const { delay: a, duration: m, iterations: l } = u;
|
|
292
|
+
return Math.max(s, a + m * l);
|
|
269
293
|
}, 0);
|
|
270
294
|
n.push(e[i] + r);
|
|
271
295
|
}
|
|
@@ -282,7 +306,7 @@ class Et extends I {
|
|
|
282
306
|
for (const { index: i, group: r } of n) {
|
|
283
307
|
const s = Math.min(i, this.animationGroups.length);
|
|
284
308
|
this.animationGroups.splice(s, 0, r), this.timingOptions.splice(s, 0, r.getTimingOptions());
|
|
285
|
-
const u = [...r.animations], a = this.animationGroups.slice(0, s).reduce((
|
|
309
|
+
const u = [...r.animations], a = this.animationGroups.slice(0, s).reduce((m, l) => m + l.animations.length, 0);
|
|
286
310
|
this.animations.splice(a, 0, ...u);
|
|
287
311
|
}
|
|
288
312
|
this.applyOffsets(), this.ready = Promise.all(this.animationGroups.map((i) => i.ready)).then(() => {
|
|
@@ -323,7 +347,7 @@ class _t {
|
|
|
323
347
|
composite: "add"
|
|
324
348
|
}), { timeline: u } = r;
|
|
325
349
|
this._animation = new Animation(s, u), this._tickCbId = null, this.progress = null, this.customEffect = (a) => e(s.target, a), this._finishHandler = (a) => {
|
|
326
|
-
this.effect.target?.getAnimations().find((
|
|
350
|
+
this.effect.target?.getAnimations().find((m) => m === this._animation) || this.cancel();
|
|
327
351
|
}, this.addEventListener("finish", this._finishHandler), this.addEventListener("remove", this._finishHandler);
|
|
328
352
|
}
|
|
329
353
|
// private tick method for customEffect loop implementation
|
|
@@ -454,7 +478,7 @@ class _t {
|
|
|
454
478
|
function wt(t) {
|
|
455
479
|
return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
|
|
456
480
|
}
|
|
457
|
-
var A = { exports: {} },
|
|
481
|
+
var A = { exports: {} }, F = A.exports, x;
|
|
458
482
|
function Ot() {
|
|
459
483
|
return x || (x = 1, (function(t) {
|
|
460
484
|
(function(e) {
|
|
@@ -551,7 +575,7 @@ function Ot() {
|
|
|
551
575
|
extend: function(o) {
|
|
552
576
|
if (typeof o != "object") throw new Error("expected object");
|
|
553
577
|
var c = Object.create(this);
|
|
554
|
-
return
|
|
578
|
+
return m(c, o), c.fastdom = this, c.initialize && c.initialize(), c;
|
|
555
579
|
},
|
|
556
580
|
// override this with a function
|
|
557
581
|
// to prevent Errors in console
|
|
@@ -576,13 +600,13 @@ function Ot() {
|
|
|
576
600
|
var f = o.indexOf(c);
|
|
577
601
|
return !!~f && !!o.splice(f, 1);
|
|
578
602
|
}
|
|
579
|
-
function
|
|
603
|
+
function m(o, c) {
|
|
580
604
|
for (var f in c)
|
|
581
605
|
c.hasOwnProperty(f) && (o[f] = c[f]);
|
|
582
606
|
}
|
|
583
|
-
var
|
|
584
|
-
t.exports =
|
|
585
|
-
})(typeof window < "u" ? window : typeof
|
|
607
|
+
var l = e.fastdom = e.fastdom || new r();
|
|
608
|
+
t.exports = l;
|
|
609
|
+
})(typeof window < "u" ? window : typeof F < "u" ? F : globalThis);
|
|
586
610
|
})(A)), A.exports;
|
|
587
611
|
}
|
|
588
612
|
var It = Ot();
|
|
@@ -598,18 +622,18 @@ function At(t) {
|
|
|
598
622
|
function w(t, e) {
|
|
599
623
|
return t ? (e || document).getElementById(t) : null;
|
|
600
624
|
}
|
|
601
|
-
function
|
|
625
|
+
function Tt(t, e) {
|
|
602
626
|
return t?.matches(`[data-motion-part~="${e}"]`) ? t : t?.querySelector(`[data-motion-part~="${e}"]`);
|
|
603
627
|
}
|
|
604
|
-
function
|
|
628
|
+
function kt(t) {
|
|
605
629
|
const e = t.alternate ? "alternate" : "";
|
|
606
630
|
return t.reversed ? `${e ? `${e}-` : ""}reverse` : e || "normal";
|
|
607
631
|
}
|
|
608
|
-
function
|
|
632
|
+
function k(t) {
|
|
609
633
|
return `${t.value}${pt(t.unit)}`;
|
|
610
634
|
}
|
|
611
635
|
function M(t, e, n) {
|
|
612
|
-
return `${t.name || "cover"} ${n && t.offset.unit !== "percentage" ? `calc(100% + ${
|
|
636
|
+
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)}`;
|
|
613
637
|
}
|
|
614
638
|
function R(t) {
|
|
615
639
|
return {
|
|
@@ -647,9 +671,9 @@ function H(t, e, n) {
|
|
|
647
671
|
easing: gt(i.easing),
|
|
648
672
|
iterations: i.iterations === 0 ? 1 / 0 : i.iterations || 1,
|
|
649
673
|
composite: i.composite,
|
|
650
|
-
direction:
|
|
674
|
+
direction: kt(i)
|
|
651
675
|
};
|
|
652
|
-
return
|
|
676
|
+
return S(e) ? (s.duration = i.duration, s.delay = i.delay || 0) : window.ViewTimeline && e?.trigger === "view-progress" ? s.duration = "auto" : (s.duration = 99.99, s.delay = 0.01), {
|
|
653
677
|
effect: i,
|
|
654
678
|
options: s,
|
|
655
679
|
id: n && `${n}-${r + 1}`,
|
|
@@ -657,12 +681,12 @@ function H(t, e, n) {
|
|
|
657
681
|
};
|
|
658
682
|
});
|
|
659
683
|
}
|
|
660
|
-
function
|
|
684
|
+
function S(t) {
|
|
661
685
|
return !t || t.trigger !== "pointer-move" && t.trigger !== "view-progress";
|
|
662
686
|
}
|
|
663
687
|
function N(t, e, n, i, r) {
|
|
664
688
|
if (t) {
|
|
665
|
-
if (
|
|
689
|
+
if (S(i) && (e.duration = e.duration || 1, r?.reducedMotion))
|
|
666
690
|
if (e.iterations === 1 || e.iterations == null)
|
|
667
691
|
e = { ...e, duration: 1 };
|
|
668
692
|
else
|
|
@@ -672,7 +696,7 @@ function N(t, e, n, i, r) {
|
|
|
672
696
|
}
|
|
673
697
|
return [];
|
|
674
698
|
}
|
|
675
|
-
function
|
|
699
|
+
function W(t, e, n, i, r) {
|
|
676
700
|
const s = t instanceof HTMLElement ? t : w(t, r);
|
|
677
701
|
if (n?.trigger === "pointer-move" && !e.keyframeEffect) {
|
|
678
702
|
let f = e;
|
|
@@ -700,42 +724,42 @@ function V(t, e, n, i, r) {
|
|
|
700
724
|
);
|
|
701
725
|
if (!a || a.length === 0)
|
|
702
726
|
return null;
|
|
703
|
-
const
|
|
704
|
-
let
|
|
727
|
+
const m = H(a, n, e.effectId);
|
|
728
|
+
let l;
|
|
705
729
|
const o = n?.trigger === "view-progress";
|
|
706
|
-
o && window.ViewTimeline && (
|
|
730
|
+
o && window.ViewTimeline && (l = new ViewTimeline({
|
|
707
731
|
subject: n.element || w(n.componentId)
|
|
708
732
|
}));
|
|
709
|
-
const c =
|
|
710
|
-
const v = d ?
|
|
733
|
+
const c = m.map(({ effect: f, options: p, id: h, part: d }) => {
|
|
734
|
+
const v = d ? Tt(s, d) : s, g = new KeyframeEffect(v || null, [], p);
|
|
711
735
|
E.mutate(() => {
|
|
712
736
|
"timing" in f && g.updateTiming(f.timing), g.setKeyframes(f.keyframes);
|
|
713
737
|
});
|
|
714
|
-
const y = o &&
|
|
738
|
+
const y = o && l ? { timeline: l } : {}, b = typeof f.customEffect == "function" ? new _t(
|
|
715
739
|
f.customEffect,
|
|
716
740
|
v || null,
|
|
717
741
|
p,
|
|
718
742
|
y
|
|
719
743
|
) : new Animation(g, y.timeline);
|
|
720
744
|
if (o)
|
|
721
|
-
if (
|
|
745
|
+
if (l)
|
|
722
746
|
E.mutate(() => {
|
|
723
|
-
const { start: _, end:
|
|
724
|
-
b.rangeStart = _, b.rangeEnd =
|
|
747
|
+
const { start: _, end: T } = R(f);
|
|
748
|
+
b.rangeStart = _, b.rangeEnd = T, b.play();
|
|
725
749
|
});
|
|
726
750
|
else {
|
|
727
|
-
const { startOffset: _, endOffset:
|
|
751
|
+
const { startOffset: _, endOffset: T } = e;
|
|
728
752
|
E.mutate(() => {
|
|
729
|
-
const
|
|
753
|
+
const q = f.startOffset || _, P = f.endOffset || T;
|
|
730
754
|
Object.assign(b, {
|
|
731
755
|
start: {
|
|
732
|
-
name:
|
|
733
|
-
offset:
|
|
756
|
+
name: q.name,
|
|
757
|
+
offset: q.offset?.value,
|
|
734
758
|
add: f.startOffsetAdd
|
|
735
759
|
},
|
|
736
760
|
end: {
|
|
737
|
-
name:
|
|
738
|
-
offset:
|
|
761
|
+
name: P.name,
|
|
762
|
+
offset: P.offset?.value,
|
|
739
763
|
add: f.endOffsetAdd
|
|
740
764
|
}
|
|
741
765
|
});
|
|
@@ -753,31 +777,31 @@ function V(t, e, n, i, r) {
|
|
|
753
777
|
function $t(t, e) {
|
|
754
778
|
return t ? `#${t}${e ? `[data-motion-part~="${e}"]` : ""}` : "";
|
|
755
779
|
}
|
|
756
|
-
function
|
|
757
|
-
const { duration: n, delay: i, iterations: r = 1, fill: s, easing: u = "linear", direction: a } = t.options,
|
|
758
|
-
return `${
|
|
780
|
+
function St(t, e) {
|
|
781
|
+
const { duration: n, delay: i, iterations: r = 1, fill: s, easing: u = "linear", direction: a } = t.options, m = t.effect.name, l = n === "auto";
|
|
782
|
+
return `${m} ${l ? "auto" : `${n}ms`}${l ? " " : ` ${i || 1}ms `}${u}${s && s !== "none" ? ` ${s}` : ""} ${!r || r === 1 / 0 ? "infinite" : r}${a === "normal" ? "" : ` ${a}`} ${e ? "" : "paused"}`;
|
|
759
783
|
}
|
|
760
|
-
function
|
|
761
|
-
return t?.style ? (
|
|
784
|
+
function qt(t, e, n) {
|
|
785
|
+
return t?.style ? (S(n) && (e.duration = e.duration || 1), t.style(e)) : [];
|
|
762
786
|
}
|
|
763
787
|
function Gt(t, e, n) {
|
|
764
|
-
const i = O(e), r =
|
|
765
|
-
return s.map((a,
|
|
766
|
-
const { start:
|
|
788
|
+
const i = O(e), r = qt(i, e), s = H(r, n, e.effectId), u = n?.trigger === "view-progress";
|
|
789
|
+
return s.map((a, m) => {
|
|
790
|
+
const { start: l, end: o } = u ? R(a.effect) : {};
|
|
767
791
|
return {
|
|
768
792
|
target: $t(t, a.part),
|
|
769
|
-
animation:
|
|
793
|
+
animation: St(a, u),
|
|
770
794
|
composition: a.options.composite,
|
|
771
795
|
custom: a.effect.custom,
|
|
772
796
|
name: a.effect.name,
|
|
773
797
|
keyframes: a.effect.keyframes,
|
|
774
|
-
id: a.id && `${a.id}-${
|
|
798
|
+
id: a.id && `${a.id}-${m + 1}`,
|
|
775
799
|
animationTimeline: u ? `--${n?.id}` : "",
|
|
776
|
-
animationRange:
|
|
800
|
+
animationRange: l || o ? `${l} ${o}` : ""
|
|
777
801
|
};
|
|
778
802
|
});
|
|
779
803
|
}
|
|
780
|
-
function
|
|
804
|
+
function Pt(t, e, n) {
|
|
781
805
|
const i = O(e), r = t instanceof HTMLElement ? t : w(t);
|
|
782
806
|
if (i && i.prepare && r) {
|
|
783
807
|
const s = { measure: L(r), mutate: j(r) };
|
|
@@ -785,20 +809,20 @@ function St(t, e, n) {
|
|
|
785
809
|
}
|
|
786
810
|
n && E.mutate(n);
|
|
787
811
|
}
|
|
788
|
-
function
|
|
812
|
+
function Ct(t, e) {
|
|
789
813
|
const n = O(e);
|
|
790
814
|
if (!n)
|
|
791
815
|
return null;
|
|
792
816
|
if (!n.style)
|
|
793
|
-
return e.effectId && t ?
|
|
794
|
-
const i = n.getNames(e), s = (typeof t == "string" ? w(t) : t)?.getAnimations(), u = s?.map((
|
|
795
|
-
return i.forEach((
|
|
796
|
-
u.includes(
|
|
797
|
-
s?.find((
|
|
817
|
+
return e.effectId && t ? zt(t, e.effectId) : null;
|
|
818
|
+
const i = n.getNames(e), s = (typeof t == "string" ? w(t) : t)?.getAnimations(), u = s?.map((m) => m.animationName) || [], a = [];
|
|
819
|
+
return i.forEach((m) => {
|
|
820
|
+
u.includes(m) && a.push(
|
|
821
|
+
s?.find((l) => l.animationName === m)
|
|
798
822
|
);
|
|
799
823
|
}), a?.length ? new I(a) : null;
|
|
800
824
|
}
|
|
801
|
-
function
|
|
825
|
+
function zt(t, e) {
|
|
802
826
|
const i = (typeof t == "string" ? w(t) : t)?.getAnimations().filter((r) => {
|
|
803
827
|
const s = r.id || r.animationName;
|
|
804
828
|
return s ? s.startsWith(e) : !0;
|
|
@@ -806,12 +830,12 @@ function Ft(t, e) {
|
|
|
806
830
|
return i?.length ? new I(i) : null;
|
|
807
831
|
}
|
|
808
832
|
function Dt(t, e, n, i = {}) {
|
|
809
|
-
const { disabled: r, allowActiveEvent: s, ...u } = i, a =
|
|
833
|
+
const { disabled: r, allowActiveEvent: s, ...u } = i, a = W(t, e, n, u);
|
|
810
834
|
if (!a)
|
|
811
835
|
return null;
|
|
812
|
-
let
|
|
836
|
+
let m = {};
|
|
813
837
|
if (n.trigger === "view-progress" && !window.ViewTimeline) {
|
|
814
|
-
const
|
|
838
|
+
const l = n.element || w(n.componentId), { ready: o } = a;
|
|
815
839
|
return a.animations.map((c) => ({
|
|
816
840
|
/* we use getters for start and end in order to access the animation's start and end
|
|
817
841
|
only when initializing the scrub scene rather than immediately */
|
|
@@ -821,7 +845,7 @@ function Dt(t, e, n, i = {}) {
|
|
|
821
845
|
get end() {
|
|
822
846
|
return c.end;
|
|
823
847
|
},
|
|
824
|
-
viewSource:
|
|
848
|
+
viewSource: l,
|
|
825
849
|
ready: o,
|
|
826
850
|
getProgress() {
|
|
827
851
|
return a.getProgress();
|
|
@@ -836,8 +860,8 @@ function Dt(t, e, n, i = {}) {
|
|
|
836
860
|
}
|
|
837
861
|
}));
|
|
838
862
|
} else if (n.trigger === "pointer-move") {
|
|
839
|
-
const
|
|
840
|
-
if (
|
|
863
|
+
const l = e, { centeredToTarget: o, transitionDuration: c, transitionEasing: f } = l, p = n.axis;
|
|
864
|
+
if (l.keyframeEffect) {
|
|
841
865
|
const h = a;
|
|
842
866
|
return h.animations?.length === 0 ? null : {
|
|
843
867
|
target: void 0,
|
|
@@ -857,17 +881,17 @@ function Dt(t, e, n, i = {}) {
|
|
|
857
881
|
}
|
|
858
882
|
};
|
|
859
883
|
}
|
|
860
|
-
|
|
884
|
+
m = {
|
|
861
885
|
centeredToTarget: o,
|
|
862
886
|
allowActiveEvent: s
|
|
863
|
-
}, e.customEffect && c && (
|
|
887
|
+
}, e.customEffect && c && (m.transitionDuration = c, m.transitionEasing = D(f)), m.target = a.target;
|
|
864
888
|
}
|
|
865
889
|
return {
|
|
866
|
-
...
|
|
890
|
+
...m,
|
|
867
891
|
getProgress() {
|
|
868
892
|
return a.getProgress();
|
|
869
893
|
},
|
|
870
|
-
effect(
|
|
894
|
+
effect(l, o, c, f) {
|
|
871
895
|
a.progress(
|
|
872
896
|
c ? {
|
|
873
897
|
// @ts-expect-error spread error on p
|
|
@@ -883,11 +907,11 @@ function Dt(t, e, n, i = {}) {
|
|
|
883
907
|
}
|
|
884
908
|
};
|
|
885
909
|
}
|
|
886
|
-
function
|
|
887
|
-
const r =
|
|
910
|
+
function Ft(t, e, n, i = !1) {
|
|
911
|
+
const r = Ct(t, e);
|
|
888
912
|
return r ? (r.ready = new Promise((s) => {
|
|
889
|
-
|
|
890
|
-
}), r) :
|
|
913
|
+
Pt(t, e, s);
|
|
914
|
+
}), r) : W(t, e, n, { reducedMotion: i });
|
|
891
915
|
}
|
|
892
916
|
function xt(t) {
|
|
893
917
|
return t === null ? [null] : typeof t == "string" ? Array.from(document.querySelectorAll(t)) : Array.isArray(t) ? t : [t];
|
|
@@ -897,7 +921,7 @@ function Mt(t, e) {
|
|
|
897
921
|
for (const { target: i, options: r } of t) {
|
|
898
922
|
const s = xt(i);
|
|
899
923
|
for (const u of s) {
|
|
900
|
-
const a =
|
|
924
|
+
const a = Ft(
|
|
901
925
|
u,
|
|
902
926
|
r,
|
|
903
927
|
void 0,
|
|
@@ -913,33 +937,33 @@ function Rt(t, e, n) {
|
|
|
913
937
|
return new Et(i, t);
|
|
914
938
|
}
|
|
915
939
|
export {
|
|
916
|
-
|
|
940
|
+
lt as backIn,
|
|
917
941
|
dt as backInOut,
|
|
918
942
|
ht as backOut,
|
|
919
943
|
ut as circIn,
|
|
920
|
-
|
|
944
|
+
mt as circInOut,
|
|
921
945
|
ft as circOut,
|
|
922
946
|
Mt as createAnimationGroups,
|
|
923
|
-
|
|
947
|
+
z as cssEasings,
|
|
924
948
|
Y as cubicIn,
|
|
925
949
|
Z as cubicInOut,
|
|
926
950
|
Q as cubicOut,
|
|
927
951
|
ot as expoIn,
|
|
928
952
|
ct as expoInOut,
|
|
929
953
|
at as expoOut,
|
|
930
|
-
|
|
954
|
+
Ft as getAnimation,
|
|
931
955
|
Gt as getCSSAnimation,
|
|
932
956
|
pt as getCssUnits,
|
|
933
957
|
gt as getEasing,
|
|
934
|
-
|
|
935
|
-
|
|
958
|
+
zt as getElementAnimation,
|
|
959
|
+
Ct as getElementCSSAnimation,
|
|
936
960
|
D as getJsEasing,
|
|
937
961
|
Dt as getScrubScene,
|
|
938
962
|
Rt as getSequence,
|
|
939
|
-
|
|
940
|
-
|
|
963
|
+
W as getWebAnimation,
|
|
964
|
+
C as jsEasings,
|
|
941
965
|
G as linear,
|
|
942
|
-
|
|
966
|
+
Pt as prepareAnimation,
|
|
943
967
|
X as quadIn,
|
|
944
968
|
U as quadInOut,
|
|
945
969
|
J as quadOut,
|
|
@@ -950,7 +974,7 @@ export {
|
|
|
950
974
|
rt as quintInOut,
|
|
951
975
|
st as quintOut,
|
|
952
976
|
Nt as registerEffects,
|
|
953
|
-
|
|
977
|
+
V as sineIn,
|
|
954
978
|
K as sineInOut,
|
|
955
979
|
B as sineOut
|
|
956
980
|
};
|