@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/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.animations[0]?.effect?.getComputedTiming().progress || 0;
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, W = (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), lt = (t) => t < 0.5 ? (1 - Math.sqrt(1 - 4 * t ** 2)) / 2 : (Math.sqrt(-(2 * t - 3) * (2 * t - 1)) + 1) / 2, mt = (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, z = {
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: W,
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: lt,
98
- backIn: mt,
121
+ circInOut: mt,
122
+ backIn: lt,
99
123
  backOut: ht,
100
124
  backInOut: dt
101
- }, F = {
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 ? F[t] || t : F.linear;
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, l = 3 * (i - e) - a, m = 1 - a - l, o = (h) => ((u * h + s) * h + r) * h, c = (h) => ((m * h + l) * h + a) * h, f = (h) => (3 * u * h + 2 * s) * h + r;
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+/), l = parseFloat(a[0]);
176
- if (isNaN(l)) return;
177
- const m = [];
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
- m.push(c);
206
+ l.push(c);
183
207
  }
184
- m.length === 0 ? i.push({ output: l, pos: null }) : m.length === 1 ? i.push({ output: l, pos: m[0] }) : (i.push({ output: l, pos: m[0] }), i.push({ output: l, pos: m[1] }));
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 l = i[u].pos, m = i[a].pos, o = a - u;
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 = l + (m - l) * (c - u) / o;
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 l = 0, m = s.length - 1;
208
- for (; l < m - 1; ) {
209
- const f = l + m >>> 1;
210
- s[f].pos <= u ? l = f : m = f;
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[l], c = s[m];
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 = z[t];
219
- return e || (bt(t) ?? vt(t) ?? z.linear);
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: l, duration: m, iterations: o } = this.timingOptions[r][u], c = l + e[r], f = n - (c + m * o);
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: l, iterations: m } = u;
268
- return Math.max(s, a + l * m);
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((l, m) => l + m.animations.length, 0);
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((l) => l === this._animation) || this.cancel();
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: {} }, C = A.exports, x;
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 l(c, o), c.fastdom = this, c.initialize && c.initialize(), c;
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 l(o, c) {
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 m = e.fastdom = e.fastdom || new r();
584
- t.exports = m;
585
- })(typeof window < "u" ? window : typeof C < "u" ? C : globalThis);
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 kt(t, e) {
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 Tt(t) {
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 T(t) {
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% + ${T(t.offset)}${e ? ` + ${e}` : ""})` : e ? `calc(${T(t.offset)} + ${e})` : T(t.offset)}`;
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: Tt(i)
674
+ direction: kt(i)
651
675
  };
652
- return q(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), {
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 q(t) {
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 (q(i) && (e.duration = e.duration || 1, r?.reducedMotion))
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 V(t, e, n, i, r) {
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 l = H(a, n, e.effectId);
704
- let m;
727
+ const m = H(a, n, e.effectId);
728
+ let l;
705
729
  const o = n?.trigger === "view-progress";
706
- o && window.ViewTimeline && (m = new ViewTimeline({
730
+ o && window.ViewTimeline && (l = new ViewTimeline({
707
731
  subject: n.element || w(n.componentId)
708
732
  }));
709
- const c = l.map(({ effect: f, options: p, id: h, part: d }) => {
710
- const v = d ? kt(s, d) : s, g = new KeyframeEffect(v || null, [], p);
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 && m ? { timeline: m } : {}, b = typeof f.customEffect == "function" ? new _t(
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 (m)
745
+ if (l)
722
746
  E.mutate(() => {
723
- const { start: _, end: k } = R(f);
724
- b.rangeStart = _, b.rangeEnd = k, b.play();
747
+ const { start: _, end: T } = R(f);
748
+ b.rangeStart = _, b.rangeEnd = T, b.play();
725
749
  });
726
750
  else {
727
- const { startOffset: _, endOffset: k } = e;
751
+ const { startOffset: _, endOffset: T } = e;
728
752
  E.mutate(() => {
729
- const P = f.startOffset || _, S = f.endOffset || k;
753
+ const q = f.startOffset || _, P = f.endOffset || T;
730
754
  Object.assign(b, {
731
755
  start: {
732
- name: P.name,
733
- offset: P.offset?.value,
756
+ name: q.name,
757
+ offset: q.offset?.value,
734
758
  add: f.startOffsetAdd
735
759
  },
736
760
  end: {
737
- name: S.name,
738
- offset: S.offset?.value,
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 qt(t, e) {
757
- const { duration: n, delay: i, iterations: r = 1, fill: s, easing: u = "linear", direction: a } = t.options, l = t.effect.name, m = n === "auto";
758
- return `${l} ${m ? "auto" : `${n}ms`}${m ? " " : ` ${i || 1}ms `}${u}${s && s !== "none" ? ` ${s}` : ""} ${!r || r === 1 / 0 ? "infinite" : r}${a === "normal" ? "" : ` ${a}`} ${e ? "" : "paused"}`;
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 Pt(t, e, n) {
761
- return t?.style ? (q(n) && (e.duration = e.duration || 1), t.style(e)) : [];
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 = Pt(i, e), s = H(r, n, e.effectId), u = n?.trigger === "view-progress";
765
- return s.map((a, l) => {
766
- const { start: m, end: o } = u ? R(a.effect) : {};
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: qt(a, u),
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}-${l + 1}`,
798
+ id: a.id && `${a.id}-${m + 1}`,
775
799
  animationTimeline: u ? `--${n?.id}` : "",
776
- animationRange: m || o ? `${m} ${o}` : ""
800
+ animationRange: l || o ? `${l} ${o}` : ""
777
801
  };
778
802
  });
779
803
  }
780
- function St(t, e, n) {
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 zt(t, e) {
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 ? Ft(t, e.effectId) : null;
794
- const i = n.getNames(e), s = (typeof t == "string" ? w(t) : t)?.getAnimations(), u = s?.map((l) => l.animationName) || [], a = [];
795
- return i.forEach((l) => {
796
- u.includes(l) && a.push(
797
- s?.find((m) => m.animationName === l)
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 Ft(t, e) {
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 = V(t, e, n, u);
833
+ const { disabled: r, allowActiveEvent: s, ...u } = i, a = W(t, e, n, u);
810
834
  if (!a)
811
835
  return null;
812
- let l = {};
836
+ let m = {};
813
837
  if (n.trigger === "view-progress" && !window.ViewTimeline) {
814
- const m = n.element || w(n.componentId), { ready: o } = a;
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: m,
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 m = e, { centeredToTarget: o, transitionDuration: c, transitionEasing: f } = m, p = n.axis;
840
- if (m.keyframeEffect) {
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
- l = {
884
+ m = {
861
885
  centeredToTarget: o,
862
886
  allowActiveEvent: s
863
- }, e.customEffect && c && (l.transitionDuration = c, l.transitionEasing = D(f)), l.target = a.target;
887
+ }, e.customEffect && c && (m.transitionDuration = c, m.transitionEasing = D(f)), m.target = a.target;
864
888
  }
865
889
  return {
866
- ...l,
890
+ ...m,
867
891
  getProgress() {
868
892
  return a.getProgress();
869
893
  },
870
- effect(m, o, c, f) {
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 Ct(t, e, n, i = !1) {
887
- const r = zt(t, e);
910
+ function Ft(t, e, n, i = !1) {
911
+ const r = Ct(t, e);
888
912
  return r ? (r.ready = new Promise((s) => {
889
- St(t, e, s);
890
- }), r) : V(t, e, n, { reducedMotion: i });
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 = Ct(
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
- mt as backIn,
940
+ lt as backIn,
917
941
  dt as backInOut,
918
942
  ht as backOut,
919
943
  ut as circIn,
920
- lt as circInOut,
944
+ mt as circInOut,
921
945
  ft as circOut,
922
946
  Mt as createAnimationGroups,
923
- F as cssEasings,
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
- Ct as getAnimation,
954
+ Ft as getAnimation,
931
955
  Gt as getCSSAnimation,
932
956
  pt as getCssUnits,
933
957
  gt as getEasing,
934
- Ft as getElementAnimation,
935
- zt as getElementCSSAnimation,
958
+ zt as getElementAnimation,
959
+ Ct as getElementCSSAnimation,
936
960
  D as getJsEasing,
937
961
  Dt as getScrubScene,
938
962
  Rt as getSequence,
939
- V as getWebAnimation,
940
- z as jsEasings,
963
+ W as getWebAnimation,
964
+ C as jsEasings,
941
965
  G as linear,
942
- St as prepareAnimation,
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
- W as sineIn,
977
+ V as sineIn,
954
978
  K as sineInOut,
955
979
  B as sineOut
956
980
  };