@wix/motion 2.1.9 → 2.1.10

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
@@ -1,4 +1,4 @@
1
- class O {
1
+ class _ {
2
2
  animations;
3
3
  options;
4
4
  ready;
@@ -9,8 +9,8 @@ class O {
9
9
  }
10
10
  _getAnimationWithLongestEndTime() {
11
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;
12
+ const o = e.effect?.getComputedTiming().endTime ?? 0, i = n.effect?.getComputedTiming().endTime ?? 0;
13
+ return o > i ? e : n;
14
14
  }, this.animations[0]);
15
15
  }
16
16
  getProgress() {
@@ -34,8 +34,8 @@ class O {
34
34
  }
35
35
  progress(e) {
36
36
  for (const n of this.animations) {
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) * e;
37
+ const { delay: o, duration: i, iterations: s } = n.effect.getTiming(), a = (Number.isFinite(i) ? i : 0) * (Number.isFinite(s) ? s : 1);
38
+ n.currentTime = ((o || 0) + a) * e;
39
39
  }
40
40
  }
41
41
  cancel() {
@@ -48,13 +48,13 @@ class O {
48
48
  }
49
49
  async onFinish(e) {
50
50
  try {
51
- await Promise.all(this.animations.map((i) => i.finished));
51
+ await Promise.all(this.animations.map((o) => o.finished));
52
52
  const n = this.animations[0];
53
53
  if (n && !this.isCSS) {
54
- const i = n.effect?.target;
55
- if (i) {
56
- const s = this.options?.effectId || n.id, r = new CustomEvent("animationend", { detail: { effectId: s } });
57
- i.dispatchEvent(r);
54
+ const o = n.effect?.target;
55
+ if (o) {
56
+ const i = this.options?.effectId || n.id, s = new CustomEvent("animationend", { detail: { effectId: i } });
57
+ o.dispatchEvent(s);
58
58
  }
59
59
  }
60
60
  e();
@@ -67,12 +67,12 @@ class O {
67
67
  await Promise.all(this.animations.map((n) => n.finished));
68
68
  } catch (n) {
69
69
  if (n.name === "AbortError") {
70
- const i = this.animations[0];
71
- if (i && !this.isCSS) {
72
- const s = i.effect?.target;
73
- if (s) {
74
- const r = new Event("animationcancel");
75
- s.dispatchEvent(r);
70
+ const o = this.animations[0];
71
+ if (o && !this.isCSS) {
72
+ const i = o.effect?.target;
73
+ if (i) {
74
+ const s = new Event("animationcancel");
75
+ i.dispatchEvent(s);
76
76
  }
77
77
  }
78
78
  e();
@@ -93,42 +93,98 @@ class O {
93
93
  }
94
94
  getTimingOptions() {
95
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;
96
+ const n = e.effect?.getTiming(), o = n?.delay ?? 0, i = Number(n?.duration) || 0, s = n?.iterations ?? 1;
97
97
  return {
98
- delay: i,
99
- duration: s,
100
- iterations: r
98
+ delay: o,
99
+ duration: i,
100
+ iterations: s
101
101
  };
102
102
  });
103
103
  }
104
104
  }
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
- linear: G,
107
- sineIn: V,
108
- sineOut: B,
109
- sineInOut: X,
110
- quadIn: U,
111
- quadOut: Y,
112
- quadInOut: Z,
113
- cubicIn: J,
114
- cubicOut: Q,
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 = {
105
+ const L = (t) => t, Y = (t) => 1 - Math.cos(t * Math.PI / 2), Z = (t) => Math.sin(t * Math.PI / 2), Q = (t) => -(Math.cos(Math.PI * t) - 1) / 2, tt = (t) => t ** 2, et = (t) => 1 - (1 - t) ** 2, nt = (t) => t < 0.5 ? 2 * t ** 2 : 1 - (-2 * t + 2) ** 2 / 2, it = (t) => t ** 3, st = (t) => 1 - (1 - t) ** 3, ot = (t) => t < 0.5 ? 4 * t ** 3 : 1 - (-2 * t + 2) ** 3 / 2, rt = (t) => t ** 4, at = (t) => 1 - (1 - t) ** 4, ct = (t) => t < 0.5 ? 8 * t ** 4 : 1 - (-2 * t + 2) ** 4 / 2, ut = (t) => t ** 5, ft = (t) => 1 - (1 - t) ** 5, mt = (t) => t < 0.5 ? 16 * t ** 5 : 1 - (-2 * t + 2) ** 5 / 2, lt = (t) => t === 0 ? 0 : 2 ** (10 * t - 10), dt = (t) => t === 1 ? 1 : 1 - 2 ** (-10 * t), ht = (t) => t === 0 ? 0 : t === 1 ? 1 : t < 0.5 ? 2 ** (20 * t - 10) / 2 : (2 - 2 ** (-20 * t + 10)) / 2, pt = (t) => 1 - Math.sqrt(1 - t ** 2), gt = (t) => Math.sqrt(1 - (t - 1) ** 2), $t = (t) => t < 0.5 ? (1 - Math.sqrt(1 - 4 * t ** 2)) / 2 : (Math.sqrt(-(2 * t - 3) * (2 * t - 1)) + 1) / 2, yt = (t) => 2.70158 * t ** 3 - 1.70158 * t ** 2, bt = (t) => 1 + 2.70158 * (t - 1) ** 3 + 1.70158 * (t - 1) ** 2, vt = (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
+ linear: L,
107
+ sineIn: Y,
108
+ sineOut: Z,
109
+ sineInOut: Q,
110
+ quadIn: tt,
111
+ quadOut: et,
112
+ quadInOut: nt,
113
+ cubicIn: it,
114
+ cubicOut: st,
115
+ cubicInOut: ot,
116
+ quartIn: rt,
117
+ quartOut: at,
118
+ quartInOut: ct,
119
+ quintIn: ut,
120
+ quintOut: ft,
121
+ quintInOut: mt,
122
+ expoIn: lt,
123
+ expoOut: dt,
124
+ expoInOut: ht,
125
+ circIn: pt,
126
+ circOut: gt,
127
+ circInOut: $t,
128
+ backIn: yt,
129
+ backOut: bt,
130
+ backInOut: vt
131
+ }, E = (t, e, n, o, i) => {
132
+ const s = 3 * e, a = 3 * (o - 2 * e), r = 1 - 3 * o + 3 * e, f = 3 * n, d = 3 * (i - 2 * n), c = 1 - 3 * i + 3 * n;
133
+ let u;
134
+ if (r === 0)
135
+ u = a === 0 ? `(${t} / ${s})` : `((sqrt(max(0, ${s * s} + ${4 * a} * ${t})) - ${s}) / ${2 * a})`;
136
+ else {
137
+ const m = a / (3 * r), p = 2 * Math.pow(a, 3) - 9 * s * a * r, l = 54 * Math.pow(r, 3), h = (3 * r * s - a * a) / (9 * r * r), $ = `((${p} - ${27 * r * r} * ${t}) / ${l})`;
138
+ if (h < 0) {
139
+ const g = 2 * Math.sqrt(-h);
140
+ let y = 0;
141
+ for (const v of [0, 1, 2])
142
+ [0, 0.25, 0.5, 0.75, 1].every((q) => {
143
+ const T = Math.min(
144
+ Math.max(2 * (p - 27 * r * r * q) / (l * h * g), -1),
145
+ 1
146
+ ), x = g * Math.cos((Math.acos(T) - v * 2 * Math.PI) / 3) - m;
147
+ return x >= -1e-6 && x <= 1.000001;
148
+ }) && (y = v);
149
+ const b = `(acos(clamp(-1, ${2 / (h * g)} * ${$}, 1)) - ${360 * y}deg) / 3`;
150
+ u = `(${g} * cos(${b}) - ${m})`;
151
+ } else {
152
+ const g = `sqrt(pow(${$}, 2) + ${Math.pow(h, 3)})`;
153
+ u = `(pow(${g} - ${$}, 1 / 3) - pow(${g} + ${$}, 1 / 3) - ${m})`;
154
+ }
155
+ }
156
+ return `(${c} * pow(${u}, 3) + ${d} * pow(${u}, 2) + ${f} * ${u})`;
157
+ }, M = {
158
+ linear: (t) => t,
159
+ ease: (t) => E(t, 0.25, 0.1, 0.25, 1),
160
+ easeIn: (t) => E(t, 0.42, 0, 1, 1),
161
+ easeOut: (t) => E(t, 0, 0, 0.58, 1),
162
+ easeInOut: (t) => E(t, 0.42, 0, 0.58, 1),
163
+ sineIn: (t) => `(1 - cos(${t} * 90deg))`,
164
+ sineOut: (t) => `(sin(${t} * 90deg))`,
165
+ sineInOut: (t) => `((1 - cos(${t} * 180deg)) / 2)`,
166
+ quadIn: (t) => `(${t} * ${t})`,
167
+ quadOut: (t) => `(1 - (1 - ${t}) * (1 - ${t}))`,
168
+ quadInOut: (t) => `(round(${t}) * (1 - (-2 * ${t} + 2) * (-2 * ${t} + 2) / 2) + (1 - round(${t})) * 2 * ${t} * ${t})`,
169
+ cubicIn: (t) => `pow(${t}, 3)`,
170
+ cubicOut: (t) => `(1 - pow(1 - ${t}, 3))`,
171
+ cubicInOut: (t) => `(round(${t}) * (1 - pow(-2 * ${t} + 2, 3) / 2) + (1 - round(${t})) * 4 * pow(${t}, 3))`,
172
+ quartIn: (t) => `pow(${t}, 4)`,
173
+ quartOut: (t) => `(1 - pow(1 - ${t}, 4))`,
174
+ quartInOut: (t) => `(round(${t}) * (1 - pow(-2 * ${t} + 2, 4) / 2) + (1 - round(${t})) * 8 * pow(${t}, 4))`,
175
+ quintIn: (t) => `pow(${t}, 5)`,
176
+ quintOut: (t) => `(1 - pow(1 - ${t}, 5))`,
177
+ quintInOut: (t) => `(round(${t}) * (1 - pow(-2 * ${t} + 2, 5) / 2) + (1 - round(${t})) * 16 * pow(${t}, 5))`,
178
+ expoIn: (t) => `(pow(2, 10 * ${t} - 10) - pow(2, -10) * (1 - ${t}))`,
179
+ expoOut: (t) => `(1 - pow(2, -10 * ${t}) + pow(2, -10) * ${t})`,
180
+ expoInOut: (t) => `((round(${t}) * (2 - pow(2, -20 * ${t} + 10)) + (1 - round(${t})) * pow(2, 20 * ${t} - 10)) / 2)`,
181
+ circIn: (t) => `(1 - sqrt(1 - ${t} * ${t}))`,
182
+ circOut: (t) => `sqrt(1 - (${t} - 1) * (${t} - 1))`,
183
+ circInOut: (t) => `((round(${t}) * (sqrt(max(0, (3 - 2 * ${t}) * (2 * ${t} - 1))) + 1) + (1 - round(${t})) * (1 - sqrt(max(0, 1 - 4 * ${t} * ${t})))) / 2)`,
184
+ backIn: (t) => `(2.70158 * pow(${t}, 3) - 1.70158 * ${t} * ${t})`,
185
+ backOut: (t) => `(1 + 2.70158 * pow(${t} - 1, 3) + 1.70158 * (${t} - 1) * (${t} - 1))`,
186
+ backInOut: (t) => `((round(${t}) * (2 + (2 * ${t} - 2) * (2 * ${t} - 2) * (2.5949095 + 3.5949095 * (2 * ${t} - 2))) + (1 - round(${t})) * 4 * ${t} * ${t} * (3.5949095 * 2 * ${t} - 2.5949095)) / 2)`
187
+ }, N = {
132
188
  linear: "linear",
133
189
  ease: "ease",
134
190
  easeIn: "ease-in",
@@ -159,142 +215,179 @@ const G = (t) => t, V = (t) => 1 - Math.cos(t * Math.PI / 2), B = (t) => Math.si
159
215
  backOut: "cubic-bezier(0.175, 0.885, 0.32, 1.275)",
160
216
  backInOut: "cubic-bezier(0.68, -0.55, 0.265, 1.55)"
161
217
  };
162
- function gt(t) {
218
+ function wt(t) {
163
219
  return t === "percentage" ? "%" : t || "px";
164
220
  }
165
- const yt = /^(webkit|moz|ms|o)(?=[A-Z])/, bt = Object.assign(/* @__PURE__ */ Object.create(null), {
221
+ const It = /^(webkit|moz|ms|o)(?=[A-Z])/, Et = Object.assign(/* @__PURE__ */ Object.create(null), {
166
222
  float: "cssFloat",
167
223
  "animation-timing-function": "easing",
168
224
  "animation-composition": "composite"
169
225
  });
170
- function Wt(t) {
171
- return t.startsWith("--") ? t : (yt.test(t) ? `-${t}` : t).replace(/[A-Z]/g, (n) => `-${n.toLowerCase()}`);
226
+ function Yt(t) {
227
+ return t.startsWith("--") ? t : (It.test(t) ? `-${t}` : t).replace(/[A-Z]/g, (n) => `-${n.toLowerCase()}`);
172
228
  }
173
- function vt(t) {
229
+ function Ot(t) {
174
230
  return t.startsWith("--") || !t.includes("-") ? t : t.replace(/^-/, "").replace(/-([a-z])/g, (e, n) => n.toUpperCase());
175
231
  }
176
- function R(t) {
177
- return bt[t] || vt(t);
232
+ function j(t) {
233
+ return Et[t] || Ot(t);
178
234
  }
179
- function Et(t) {
235
+ function _t(t) {
180
236
  for (const e in t)
181
- if (Object.hasOwn(t, e) && R(e) !== e)
237
+ if (Object.hasOwn(t, e) && j(e) !== e)
182
238
  return !0;
183
239
  return !1;
184
240
  }
185
- function _t(t) {
241
+ function At(t) {
186
242
  if (!Array.isArray(t))
187
243
  return t;
188
244
  let e;
189
- return t.forEach((n, i) => {
190
- if (!n || typeof n != "object" || !Et(n))
245
+ return t.forEach((n, o) => {
246
+ if (!n || typeof n != "object" || !_t(n))
191
247
  return;
192
248
  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;
249
+ const i = {};
250
+ for (const s in n)
251
+ Object.hasOwn(n, s) && (i[j(s)] = n[s]);
252
+ e[o] = i;
197
253
  }), e || t;
198
254
  }
199
- function wt(t) {
200
- return t ? C[t] || t : C.linear;
255
+ function qt(t) {
256
+ return t ? N[t] || t : N.linear;
201
257
  }
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;
204
- function p(h) {
205
- let d = h;
258
+ function Tt(t, e, n, o) {
259
+ const i = 3 * t, s = 3 * (n - t) - i, a = 1 - i - s, r = 3 * e, f = 3 * (o - e) - r, d = 1 - r - f, c = (l) => ((a * l + s) * l + i) * l, u = (l) => ((d * l + f) * l + r) * l, m = (l) => (3 * a * l + 2 * s) * l + i;
260
+ function p(l) {
261
+ let h = l;
206
262
  for (let y = 0; y < 8; y++) {
207
- const b = a(d) - h;
208
- if (Math.abs(b) < 1e-7) return d;
209
- const _ = f(d);
210
- if (Math.abs(_) < 1e-6) break;
211
- d -= b / _;
263
+ const b = c(h) - l;
264
+ if (Math.abs(b) < 1e-7) return h;
265
+ const v = m(h);
266
+ if (Math.abs(v) < 1e-6) break;
267
+ h -= b / v;
212
268
  }
213
- let v = 0, g = 1;
214
- for (d = (v + g) / 2; g - v > 1e-7; ) {
215
- const y = a(d);
216
- if (Math.abs(y - h) < 1e-7) return d;
217
- h > y ? v = d : g = d, d = (v + g) / 2;
269
+ let $ = 0, g = 1;
270
+ for (h = ($ + g) / 2; g - $ > 1e-7; ) {
271
+ const y = c(h);
272
+ if (Math.abs(y - l) < 1e-7) return h;
273
+ l > y ? $ = h : g = h, h = ($ + g) / 2;
218
274
  }
219
- return d;
275
+ return h;
220
276
  }
221
- return (h) => h <= 0 ? 0 : h >= 1 ? 1 : u(p(h));
277
+ return (l) => l <= 0 ? 0 : l >= 1 ? 1 : u(p(l));
222
278
  }
223
- function Ot(t) {
279
+ function W(t) {
224
280
  const e = t.match(
225
281
  /^cubic-bezier\(\s*(-?[\d.]+)\s*,\s*(-?[\d.]+)\s*,\s*(-?[\d.]+)\s*,\s*(-?[\d.]+)\s*\)$/
226
282
  );
227
283
  if (!e) return;
228
- const n = parseFloat(e[1]), i = parseFloat(e[2]), s = parseFloat(e[3]), r = parseFloat(e[4]);
229
- if (![n, i, s, r].some(isNaN))
230
- return At(n, i, s, r);
284
+ const n = parseFloat(e[1]), o = parseFloat(e[2]), i = parseFloat(e[3]), s = parseFloat(e[4]);
285
+ if (![n, o, i, s].some(isNaN))
286
+ return [n, o, i, s];
231
287
  }
232
- function It(t) {
288
+ function St(t) {
289
+ const e = W(t);
290
+ if (!(!e || e.some(isNaN)))
291
+ return Tt(...e);
292
+ }
293
+ function kt(t) {
294
+ const e = W(t);
295
+ if (!(!e || e.some(isNaN)))
296
+ return (n) => E(n, ...e);
297
+ }
298
+ function H(t) {
233
299
  const e = t.match(/^linear\((.+)\)$/);
234
300
  if (!e) return;
235
- const n = e[1].split(",").map((c) => c.trim()).filter(Boolean);
301
+ const n = e[1].split(",").map((s) => s.trim()).filter(Boolean);
236
302
  if (n.length === 0) return;
237
- const i = [];
238
- for (const c of n) {
239
- const o = c.split(/\s+/), m = parseFloat(o[0]);
240
- if (isNaN(m)) return;
241
- const l = [];
242
- for (let a = 1; a < o.length; a++)
243
- if (o[a].endsWith("%")) {
244
- const u = parseFloat(o[a]) / 100;
245
- if (isNaN(u)) return;
246
- l.push(u);
303
+ const o = [];
304
+ for (const s of n) {
305
+ const a = s.split(/\s+/), r = parseFloat(a[0]);
306
+ if (isNaN(r)) return;
307
+ const f = [];
308
+ for (let d = 1; d < a.length; d++)
309
+ if (a[d].endsWith("%")) {
310
+ const c = parseFloat(a[d]) / 100;
311
+ if (isNaN(c)) return;
312
+ f.push(c);
247
313
  }
248
- 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] }));
249
- }
250
- if (i.length === 0) return;
251
- i[0].pos === null && (i[0].pos = 0), i[i.length - 1].pos === null && (i[i.length - 1].pos = 1);
252
- let s = 0;
253
- for (; s < i.length; )
254
- if (i[s].pos === null) {
255
- const c = s - 1;
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;
314
+ f.length === 0 ? o.push({ output: r, pos: null }) : f.length === 1 ? o.push({ output: r, pos: f[0] }) : (o.push({ output: r, pos: f[0] }), o.push({ output: r, pos: f[1] }));
315
+ }
316
+ if (o.length === 0) return;
317
+ o[0].pos === null && (o[0].pos = 0), o[o.length - 1].pos === null && (o[o.length - 1].pos = 1);
318
+ let i = 0;
319
+ for (; i < o.length; )
320
+ if (o[i].pos === null) {
321
+ const s = i - 1;
322
+ let a = i;
323
+ for (; a < o.length && o[a].pos === null; ) a++;
324
+ const r = o[s].pos, f = o[a].pos, d = a - s;
325
+ for (let c = s + 1; c < a; c++)
326
+ o[c].pos = r + (f - r) * (c - s) / d;
327
+ i = a + 1;
262
328
  } else
263
- s++;
264
- for (let c = 1; c < i.length; c++)
265
- i[c].pos < i[c - 1].pos && (i[c].pos = i[c - 1].pos);
266
- const r = i;
267
- return (c) => {
268
- if (c <= r[0].pos) return r[0].output;
269
- const o = r[r.length - 1];
270
- if (c >= o.pos) return o.output;
271
- let m = 0, l = r.length - 1;
272
- for (; m < l - 1; ) {
273
- const f = m + l >>> 1;
274
- r[f].pos <= c ? m = f : l = f;
275
- }
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);
278
- };
329
+ i++;
330
+ for (let s = 1; s < o.length; s++)
331
+ o[s].pos < o[s - 1].pos && (o[s].pos = o[s - 1].pos);
332
+ return o;
333
+ }
334
+ function Pt(t) {
335
+ const e = H(t);
336
+ if (e)
337
+ return (n) => {
338
+ if (n <= e[0].pos) return e[0].output;
339
+ const o = e[e.length - 1];
340
+ if (n >= o.pos) return o.output;
341
+ let i = 0, s = e.length - 1;
342
+ for (; i < s - 1; ) {
343
+ const f = i + s >>> 1;
344
+ e[f].pos <= n ? i = f : s = f;
345
+ }
346
+ const a = e[i], r = e[s];
347
+ return r.pos === a.pos ? r.output : a.output + (r.output - a.output) * (n - a.pos) / (r.pos - a.pos);
348
+ };
279
349
  }
280
- function D(t) {
350
+ function Ct(t) {
351
+ const e = H(t);
352
+ if (e)
353
+ return (n) => {
354
+ const o = [`${e[0].output}`];
355
+ for (let i = 1; i < e.length; i++) {
356
+ const s = e[i].pos - e[i - 1].pos, a = e[i].output - e[i - 1].output;
357
+ if (s === 0 && e[i - 1].pos === 0)
358
+ o.push(`${a}`);
359
+ else {
360
+ const r = s === 0 ? `round(${n} / ${2 * e[i - 1].pos})` : `(${n} - ${e[i - 1].pos}) / ${s}`;
361
+ o.push(`clamp(0, ${r}, 1) * ${a}`);
362
+ }
363
+ }
364
+ return `(${o.join(" + ")})`;
365
+ };
366
+ }
367
+ function B(t) {
281
368
  if (!t) return;
282
369
  const e = z[t];
283
- return e || (Ot(t) ?? It(t) ?? z.linear);
370
+ return e || (St(t) ?? Pt(t) ?? z.linear);
284
371
  }
285
- class Tt extends O {
372
+ function xt(t) {
373
+ if (!t) return;
374
+ const e = M[t];
375
+ return e || (kt(t) ?? Ct(t) ?? M.linear);
376
+ }
377
+ class zt extends _ {
286
378
  animationGroups;
287
379
  delay;
288
380
  offset;
289
381
  offsetEasing;
382
+ sequenceId;
290
383
  timingOptions;
291
384
  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 }) => ({
294
- delay: r,
295
- duration: Number.isFinite(c) ? c : 0,
296
- iterations: Number.isFinite(o) ? o : 1
297
- }))), this.applyOffsets(), this.ready = Promise.all(e.map((s) => s.ready)).then(() => {
385
+ const o = e.flatMap((i) => [...i.animations]);
386
+ super(o), this.animationGroups = e, this.delay = n.delay ?? 0, this.offset = n.offset ?? 0, this.sequenceId = n.sequenceId, this.offsetEasing = typeof n.offsetEasing == "function" ? n.offsetEasing : B(n.offsetEasing) ?? L, this.timingOptions = this.animationGroups.map((i) => i.getTimingOptions().map(({ delay: s, duration: a, iterations: r }) => ({
387
+ delay: s,
388
+ duration: Number.isFinite(a) ? a : 0,
389
+ iterations: Number.isFinite(r) ? r : 1
390
+ }))), this.applyOffsets(), this.ready = Promise.all(e.map((i) => i.ready)).then(() => {
298
391
  });
299
392
  }
300
393
  /**
@@ -308,30 +401,34 @@ class Tt extends O {
308
401
  const n = e - 1;
309
402
  return Array.from(
310
403
  { length: e },
311
- (i, s) => this.offsetEasing(s / n) * n * this.offset | 0
404
+ (o, i) => this.offsetEasing(i / n) * n * this.offset | 0
312
405
  );
313
406
  }
314
407
  applyOffsets() {
315
408
  if (this.animationGroups.length === 0 || this.animations.length === 0) return;
316
- const e = this.calculateOffsets(), n = this.getSequenceActiveDuration(e);
409
+ const e = this.calculateOffsets(), n = this.getSequenceActiveDuration(e), o = this.animationGroups.length - 1;
317
410
  this.animationGroups.forEach((i, s) => {
318
- i.animations.forEach((r, c) => {
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 });
411
+ i.animations.forEach((a, r) => {
412
+ const f = a.effect;
413
+ if (!f) return;
414
+ const { delay: d, duration: c, iterations: u } = this.timingOptions[s][r], m = d + e[s], p = n - (m + c * u);
415
+ if (i.isCSS && this.sequenceId) {
416
+ const { target: l } = f;
417
+ l instanceof HTMLElement && (l.style.setProperty(`--motion-${this.sequenceId}-index`, `${s}`), l.style.setProperty(`--motion-${this.sequenceId}-last`, `${o}`)), f.updateTiming({ endDelay: p });
418
+ } else
419
+ f.updateTiming({ delay: m + this.delay, endDelay: p });
323
420
  });
324
421
  });
325
422
  }
326
423
  getSequenceActiveDuration(e) {
327
424
  const n = [];
328
- for (let i = 0; i < this.timingOptions.length; i++) {
329
- const s = this.timingOptions[i].reduce((r, c) => {
330
- if (!c) return r;
331
- const { delay: o, duration: m, iterations: l } = c;
332
- return Math.max(r, o + m * l);
425
+ for (let o = 0; o < this.timingOptions.length; o++) {
426
+ const i = this.timingOptions[o].reduce((s, a) => {
427
+ if (!a) return s;
428
+ const { delay: r, duration: f, iterations: d } = a;
429
+ return Math.max(s, r + f * d);
333
430
  }, 0);
334
- n.push(e[i] + s);
431
+ n.push(e[o] + i);
335
432
  }
336
433
  return Math.max(...n);
337
434
  }
@@ -342,14 +439,14 @@ class Tt extends O {
342
439
  */
343
440
  addGroups(e) {
344
441
  if (e.length === 0) return;
345
- const n = [...e].sort((i, s) => s.index - i.index);
346
- for (const { index: i, group: s } of n) {
347
- const r = Math.min(i, this.animationGroups.length);
348
- this.animationGroups.splice(r, 0, s), this.timingOptions.splice(r, 0, s.getTimingOptions());
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);
442
+ const n = [...e].sort((o, i) => i.index - o.index);
443
+ for (const { index: o, group: i } of n) {
444
+ const s = Math.min(o, this.animationGroups.length);
445
+ this.animationGroups.splice(s, 0, i), this.timingOptions.splice(s, 0, i.getTimingOptions());
446
+ const a = [...i.animations], r = this.animationGroups.slice(0, s).reduce((f, d) => f + d.animations.length, 0);
447
+ this.animations.splice(r, 0, ...a);
351
448
  }
352
- this.applyOffsets(), this.ready = Promise.all(this.animationGroups.map((i) => i.ready)).then(() => {
449
+ this.applyOffsets(), this.ready = Promise.all(this.animationGroups.map((o) => o.ready)).then(() => {
353
450
  });
354
451
  }
355
452
  /**
@@ -358,13 +455,13 @@ class Tt extends O {
358
455
  * groups are returned.
359
456
  */
360
457
  removeGroups(e) {
361
- const n = [], i = [], s = [];
362
- for (let r = 0; r < this.animationGroups.length; r++)
363
- e(this.animationGroups[r]) ? n.push(this.animationGroups[r]) : (i.push(this.animationGroups[r]), s.push(this.timingOptions[r]));
458
+ const n = [], o = [], i = [];
459
+ for (let s = 0; s < this.animationGroups.length; s++)
460
+ e(this.animationGroups[s]) ? n.push(this.animationGroups[s]) : (o.push(this.animationGroups[s]), i.push(this.timingOptions[s]));
364
461
  if (n.length === 0) return n;
365
- for (const r of n)
366
- r.cancel();
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(() => {
462
+ for (const s of n)
463
+ s.cancel();
464
+ return this.animationGroups = o, this.timingOptions = i, this.animations = o.flatMap((s) => [...s.animations]), this.applyOffsets(), this.ready = Promise.all(this.animationGroups.map((s) => s.ready)).then(() => {
368
465
  }), n;
369
466
  }
370
467
  async onFinish(e) {
@@ -375,19 +472,19 @@ class Tt extends O {
375
472
  }
376
473
  }
377
474
  }
378
- class kt {
475
+ class Mt {
379
476
  _animation;
380
477
  customEffect;
381
478
  progress;
382
479
  _tickCbId;
383
480
  _finishHandler;
384
- constructor(e, n, i, s) {
385
- const r = new KeyframeEffect(n, [], {
386
- ...i,
481
+ constructor(e, n, o, i) {
482
+ const s = new KeyframeEffect(n, [], {
483
+ ...o,
387
484
  composite: "add"
388
- }), { timeline: c } = s;
389
- this._animation = new Animation(r, c), this._tickCbId = null, this.progress = null, this.customEffect = (o) => e(r.target, o), this._finishHandler = (o) => {
390
- this.effect.target?.getAnimations().find((m) => m === this._animation) || this.cancel();
485
+ }), { timeline: a } = i;
486
+ this._animation = new Animation(s, a), this._tickCbId = null, this.progress = null, this.customEffect = (r) => e(s.target, r), this._finishHandler = (r) => {
487
+ this.effect.target?.getAnimations().find((f) => f === this._animation) || this.cancel();
391
488
  }, this.addEventListener("finish", this._finishHandler), this.addEventListener("remove", this._finishHandler);
392
489
  }
393
490
  // private tick method for customEffect loop implementation
@@ -505,33 +602,33 @@ class kt {
505
602
  this._animation.updatePlaybackRate(e);
506
603
  }
507
604
  // Animation events API
508
- addEventListener(e, n, i) {
509
- this._animation.addEventListener(e, n, i);
605
+ addEventListener(e, n, o) {
606
+ this._animation.addEventListener(e, n, o);
510
607
  }
511
- removeEventListener(e, n, i) {
512
- this._animation.removeEventListener(e, n, i);
608
+ removeEventListener(e, n, o) {
609
+ this._animation.removeEventListener(e, n, o);
513
610
  }
514
611
  dispatchEvent(e) {
515
612
  return this._animation.dispatchEvent(e);
516
613
  }
517
614
  }
518
- function $t(t) {
615
+ function Nt(t) {
519
616
  return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
520
617
  }
521
- var I = { exports: {} }, F = I.exports, N;
522
- function Pt() {
523
- return N || (N = 1, (function(t) {
618
+ var S = { exports: {} }, F = S.exports, D;
619
+ function Ft() {
620
+ return D || (D = 1, (function(t) {
524
621
  (function(e) {
525
622
  var n = function() {
526
- }, i = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.msRequestAnimationFrame || function(a) {
527
- return setTimeout(a, 16);
623
+ }, o = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.msRequestAnimationFrame || function(c) {
624
+ return setTimeout(c, 16);
528
625
  };
529
- function s() {
530
- var a = this;
531
- a.reads = [], a.writes = [], a.raf = i.bind(e);
626
+ function i() {
627
+ var c = this;
628
+ c.reads = [], c.writes = [], c.raf = o.bind(e);
532
629
  }
533
- s.prototype = {
534
- constructor: s,
630
+ i.prototype = {
631
+ constructor: i,
535
632
  /**
536
633
  * We run this inside a try catch
537
634
  * so that if any jobs error, we
@@ -540,8 +637,8 @@ function Pt() {
540
637
  *
541
638
  * @param {Array} tasks
542
639
  */
543
- runTasks: function(a) {
544
- for (var u; u = a.shift(); ) u();
640
+ runTasks: function(c) {
641
+ for (var u; u = c.shift(); ) u();
545
642
  },
546
643
  /**
547
644
  * Adds a job to the read batch and
@@ -551,9 +648,9 @@ function Pt() {
551
648
  * @param {Object} ctx the context to be bound to `fn` (optional).
552
649
  * @public
553
650
  */
554
- measure: function(a, u) {
555
- var f = u ? a.bind(u) : a;
556
- return this.reads.push(f), r(this), f;
651
+ measure: function(c, u) {
652
+ var m = u ? c.bind(u) : c;
653
+ return this.reads.push(m), s(this), m;
557
654
  },
558
655
  /**
559
656
  * Adds a job to the
@@ -564,9 +661,9 @@ function Pt() {
564
661
  * @param {Object} ctx the context to be bound to `fn` (optional).
565
662
  * @public
566
663
  */
567
- mutate: function(a, u) {
568
- var f = u ? a.bind(u) : a;
569
- return this.writes.push(f), r(this), f;
664
+ mutate: function(c, u) {
665
+ var m = u ? c.bind(u) : c;
666
+ return this.writes.push(m), s(this), m;
570
667
  },
571
668
  /**
572
669
  * Clears a scheduled 'read' or 'write' task.
@@ -575,8 +672,8 @@ function Pt() {
575
672
  * @return {Boolean} success
576
673
  * @public
577
674
  */
578
- clear: function(a) {
579
- return o(this.reads, a) || o(this.writes, a);
675
+ clear: function(c) {
676
+ return r(this.reads, c) || r(this.writes, c);
580
677
  },
581
678
  /**
582
679
  * Extend this FastDom with some
@@ -612,273 +709,287 @@ function Pt() {
612
709
  * @param {Object} props properties to mixin
613
710
  * @return {FastDom}
614
711
  */
615
- extend: function(a) {
616
- if (typeof a != "object") throw new Error("expected object");
712
+ extend: function(c) {
713
+ if (typeof c != "object") throw new Error("expected object");
617
714
  var u = Object.create(this);
618
- return m(u, a), u.fastdom = this, u.initialize && u.initialize(), u;
715
+ return f(u, c), u.fastdom = this, u.initialize && u.initialize(), u;
619
716
  },
620
717
  // override this with a function
621
718
  // to prevent Errors in console
622
719
  // when tasks throw
623
720
  catch: null
624
721
  };
625
- function r(a) {
626
- a.scheduled || (a.scheduled = !0, a.raf(c.bind(null, a)));
722
+ function s(c) {
723
+ c.scheduled || (c.scheduled = !0, c.raf(a.bind(null, c)));
627
724
  }
628
- function c(a) {
629
- var u = a.writes, f = a.reads, p;
725
+ function a(c) {
726
+ var u = c.writes, m = c.reads, p;
630
727
  try {
631
- n("flushing reads", f.length), a.runTasks(f), n("flushing writes", u.length), a.runTasks(u);
632
- } catch (h) {
633
- p = h;
728
+ n("flushing reads", m.length), c.runTasks(m), n("flushing writes", u.length), c.runTasks(u);
729
+ } catch (l) {
730
+ p = l;
634
731
  }
635
- if (a.scheduled = !1, (f.length || u.length) && r(a), p)
636
- if (n("task errored", p.message), a.catch) a.catch(p);
732
+ if (c.scheduled = !1, (m.length || u.length) && s(c), p)
733
+ if (n("task errored", p.message), c.catch) c.catch(p);
637
734
  else throw p;
638
735
  }
639
- function o(a, u) {
640
- var f = a.indexOf(u);
641
- return !!~f && !!a.splice(f, 1);
736
+ function r(c, u) {
737
+ var m = c.indexOf(u);
738
+ return !!~m && !!c.splice(m, 1);
642
739
  }
643
- function m(a, u) {
644
- for (var f in u)
645
- u.hasOwnProperty(f) && (a[f] = u[f]);
740
+ function f(c, u) {
741
+ for (var m in u)
742
+ u.hasOwnProperty(m) && (c[m] = u[m]);
646
743
  }
647
- var l = e.fastdom = e.fastdom || new s();
648
- t.exports = l;
744
+ var d = e.fastdom = e.fastdom || new i();
745
+ t.exports = d;
649
746
  })(typeof window < "u" ? window : typeof F < "u" ? F : globalThis);
650
- })(I)), I.exports;
747
+ })(S)), S.exports;
651
748
  }
652
- var St = Pt();
653
- const E = /* @__PURE__ */ $t(St), $ = {};
654
- function Ht(t) {
655
- Object.assign($, t);
749
+ var Dt = Ft();
750
+ const w = /* @__PURE__ */ Nt(Dt), P = {};
751
+ function Zt(t) {
752
+ Object.assign(P, t);
656
753
  }
657
- function qt(t) {
658
- return t in $ ? $[t] : (console.warn(
754
+ function Gt(t) {
755
+ return t in P ? P[t] : (console.warn(
659
756
  `${t} not found in registry. Please make sure to import and register the preset.`
660
757
  ), null);
661
758
  }
662
- function w(t, e) {
759
+ function I(t, e) {
663
760
  return t ? (e || document).getElementById(t) : null;
664
761
  }
665
- function zt(t, e) {
762
+ function Rt(t, e) {
666
763
  return t?.matches(`[data-motion-part~="${e}"]`) ? t : t?.querySelector(`[data-motion-part~="${e}"]`);
667
764
  }
668
- function Ct(t) {
765
+ function Lt(t) {
669
766
  const e = t.alternate ? "alternate" : "";
670
767
  return t.reversed ? `${e ? `${e}-` : ""}reverse` : e || "normal";
671
768
  }
672
769
  function k(t) {
673
- return `${t.value}${gt(t.unit)}`;
770
+ return `${t.value}${wt(t.unit)}`;
674
771
  }
675
- function x(t, e, n) {
772
+ function G(t, e, n) {
676
773
  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)}`;
677
774
  }
678
- function j(t) {
775
+ function K(t) {
679
776
  return {
680
- start: x(t.startOffset, t.startOffsetAdd),
681
- end: x(t.endOffset, t.endOffsetAdd, !0)
777
+ start: G(t.startOffset, t.startOffsetAdd),
778
+ end: G(t.endOffset, t.endOffsetAdd, !0)
682
779
  };
683
780
  }
684
- function L(t) {
685
- return (e) => E.measure(() => e(t));
781
+ function V(t) {
782
+ return (e) => w.measure(() => e(t));
686
783
  }
687
- function W(t) {
688
- return (e) => E.mutate(() => e(t));
784
+ function X(t) {
785
+ return (e) => w.mutate(() => e(t));
689
786
  }
690
- function A(t) {
787
+ function O(t) {
691
788
  if (t.namedEffect) {
692
789
  const e = t.namedEffect.type;
693
- return typeof e == "string" ? qt(e) : null;
790
+ return typeof e == "string" ? Gt(e) : null;
694
791
  } else if (t.keyframeEffect) {
695
- const e = (i) => {
696
- const { name: s, keyframes: r } = i.keyframeEffect;
697
- return [{ ...i, name: s, keyframes: r }];
792
+ const e = (o) => {
793
+ const { name: i, keyframes: s } = o.keyframeEffect;
794
+ return [{ ...o, name: i, keyframes: s }];
698
795
  };
699
- return { web: e, style: e, getNames: (i) => {
700
- const { effectId: s } = i, { name: r } = i.keyframeEffect, c = r || s;
701
- return c ? [c] : [];
796
+ return { web: e, style: e, getNames: (o) => {
797
+ const { effectId: i } = o, { name: s } = o.keyframeEffect, a = s || i;
798
+ return a ? [a] : [];
702
799
  } };
703
800
  } else if (t.customEffect)
704
801
  return (e) => [{ ...e, keyframes: [] }];
705
802
  return null;
706
803
  }
707
- function H(t, e, n, i) {
708
- return t.map((s, r) => {
709
- const c = {
710
- fill: s.fill,
711
- easing: wt(s.easing),
712
- iterations: s.iterations === 0 ? 1 / 0 : s.iterations || 1,
713
- composite: s.composite,
714
- direction: Ct(s)
804
+ function J(t, e, n, o) {
805
+ return t.map((i, s) => {
806
+ const a = {
807
+ fill: i.fill,
808
+ easing: qt(i.easing),
809
+ iterations: i.iterations === 0 ? 1 / 0 : i.iterations || 1,
810
+ composite: i.composite,
811
+ direction: Lt(i)
715
812
  };
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);
813
+ C(e) ? (a.duration = i.duration, a.delay = i.delay || 0) : e?.trigger === "view-progress" && (o || window.ViewTimeline) ? a.duration = "auto" : (a.duration = 99.99, a.delay = 0.01);
814
+ const r = At(i.keyframes);
718
815
  return {
719
- effect: o === s.keyframes ? s : { ...s, keyframes: o },
720
- options: c,
721
- id: n && `${n}-${r + 1}`,
722
- part: s.part
816
+ effect: r === i.keyframes ? i : { ...i, keyframes: r },
817
+ options: a,
818
+ id: n && `${n}-${s + 1}`,
819
+ part: i.part
723
820
  };
724
821
  });
725
822
  }
726
- function P(t) {
823
+ function C(t) {
727
824
  return !t || t.trigger !== "pointer-move" && t.trigger !== "view-progress";
728
825
  }
729
- function M(t, e, n, i, s) {
826
+ function R(t, e, n, o, i) {
730
827
  if (t) {
731
- if (P(i) && (e.duration = e.duration || 1, s?.reducedMotion))
828
+ if (C(o) && (e.duration = e.duration || 1, i?.reducedMotion))
732
829
  if (e.iterations === 1 || e.iterations == null)
733
830
  e = { ...e, duration: 1 };
734
831
  else
735
832
  return [];
736
- let r;
737
- return n instanceof HTMLElement && (r = { measure: L(n), mutate: W(n) }), t.web ? t.web(e, r, s) : t(e, r, s);
833
+ let s;
834
+ return n instanceof HTMLElement && (s = { measure: V(n), mutate: X(n) }), t.web ? t.web(e, s, i) : t(e, s, i);
738
835
  }
739
836
  return [];
740
837
  }
741
- function K(t, e, n, i, s) {
742
- const r = typeof t == "string" ? w(t, s) : t;
838
+ function U(t, e, n, o, i) {
839
+ const s = typeof t == "string" ? I(t, i) : t;
743
840
  if (n?.trigger === "pointer-move" && !e.keyframeEffect) {
744
- let f = e;
745
- e.customEffect && (f = {
841
+ let m = e;
842
+ e.customEffect && (m = {
746
843
  ...e,
747
844
  namedEffect: { id: "", type: "CustomMouse" }
748
845
  });
749
- const p = A(
750
- f
751
- ), h = M(
846
+ const p = O(
847
+ m
848
+ ), l = R(
752
849
  p,
753
850
  e,
754
- r,
851
+ s,
755
852
  n,
756
- i
853
+ o
757
854
  );
758
- return typeof h != "function" ? null : h(r);
855
+ return typeof l != "function" ? null : l(s);
759
856
  }
760
- const c = A(e), o = M(
761
- c,
857
+ const a = O(e), r = R(
858
+ a,
762
859
  e,
763
- r,
860
+ s,
764
861
  n,
765
- i
862
+ o
766
863
  );
767
- if (!o || o.length === 0)
864
+ if (!r || r.length === 0)
768
865
  return null;
769
- const m = H(o, n, e.effectId);
770
- let l;
771
- const a = n?.trigger === "view-progress";
772
- a && window.ViewTimeline && (l = new ViewTimeline({
773
- subject: n.element || w(n.componentId)
866
+ const f = J(r, n, e.effectId);
867
+ let d;
868
+ const c = n?.trigger === "view-progress";
869
+ c && window.ViewTimeline && (d = new ViewTimeline({
870
+ subject: n.element || I(n.componentId)
774
871
  }));
775
- const u = m.map(({ effect: f, options: p, id: h, part: d }) => {
776
- const v = d ? zt(r, d) : r, g = new KeyframeEffect(v || null, [], p);
777
- E.mutate(() => {
778
- "timing" in f && g.updateTiming(f.timing), g.setKeyframes(f.keyframes);
872
+ const u = f.map(({ effect: m, options: p, id: l, part: h }) => {
873
+ const $ = h ? Rt(s, h) : s, g = new KeyframeEffect($ || null, [], p);
874
+ w.mutate(() => {
875
+ "timing" in m && g.updateTiming(m.timing), g.setKeyframes(m.keyframes);
779
876
  });
780
- const y = a && l ? { timeline: l } : {}, b = typeof f.customEffect == "function" ? new kt(
781
- f.customEffect,
782
- v || null,
877
+ const y = c && d ? { timeline: d } : {}, b = typeof m.customEffect == "function" ? new Mt(
878
+ m.customEffect,
879
+ $ || null,
783
880
  p,
784
881
  y
785
882
  ) : new Animation(g, y.timeline);
786
- if (a)
787
- if (l)
788
- E.mutate(() => {
789
- const { start: _, end: T } = j(f);
790
- b.rangeStart = _, b.rangeEnd = T, b.play();
883
+ if (c)
884
+ if (d)
885
+ w.mutate(() => {
886
+ const { start: v, end: A } = K(m);
887
+ b.rangeStart = v, b.rangeEnd = A, b.play();
791
888
  });
792
889
  else {
793
- const { startOffset: _, endOffset: T } = e;
794
- E.mutate(() => {
795
- const S = f.startOffset || _, q = f.endOffset || T;
890
+ const { startOffset: v, endOffset: A } = e;
891
+ w.mutate(() => {
892
+ const q = m.startOffset || v, T = m.endOffset || A;
796
893
  Object.assign(b, {
797
894
  start: {
798
- name: S.name,
799
- offset: S.offset?.value,
800
- add: f.startOffsetAdd
801
- },
802
- end: {
803
895
  name: q.name,
804
896
  offset: q.offset?.value,
805
- add: f.endOffsetAdd
897
+ add: m.startOffsetAdd
898
+ },
899
+ end: {
900
+ name: T.name,
901
+ offset: T.offset?.value,
902
+ add: m.endOffsetAdd
806
903
  }
807
904
  });
808
905
  });
809
906
  }
810
- return h && (b.id = h), b;
907
+ return l && (b.id = l), b;
811
908
  });
812
- return new O(u, {
909
+ return new _(u, {
813
910
  ...e,
814
911
  trigger: { ...n || {} },
815
912
  // make sure the group is ready after all animation targets are measured and mutated
816
- measured: new Promise((f) => E.mutate(f))
913
+ measured: new Promise((m) => w.mutate(m))
817
914
  });
818
915
  }
819
- function Ft(t, e) {
916
+ function jt(t, e) {
820
917
  return t ? `#${t}${e ? `[data-motion-part~="${e}"]` : ""}` : "";
821
918
  }
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"}`;
919
+ function Wt(t, e, n) {
920
+ const { duration: o, delay: i, iterations: s = 1, fill: a, easing: r = "linear", direction: f } = t.options, d = t.effect.name, c = o === "auto", { sequenceId: u, delay: m, offset: p, offsetEasing: l = "linear" } = n || {};
921
+ let h = `${i ?? 0}ms`;
922
+ if (u && typeof l == "string") {
923
+ const $ = xt(l);
924
+ if ($) {
925
+ const g = (i ?? 0) + (m ?? 0);
926
+ if (p) {
927
+ const y = $(
928
+ `(var(--motion-${u}-index, 0) / var(--motion-${u}-last, 1))`
929
+ );
930
+ h = `calc(${`(${g} + ${y} * ${p} * var(--motion-${u}-last, 1))`} * 1ms)`;
931
+ } else
932
+ h = `${g}ms`;
933
+ }
934
+ }
935
+ return `${d} ${c ? "auto" : `${o}ms`}${c ? " " : ` ${h} `}${r}${a && a !== "none" ? ` ${a}` : ""} ${!s || s === 1 / 0 ? "infinite" : s}${f === "normal" ? "" : ` ${f}`} ${e ? "" : "paused"}`;
825
936
  }
826
- function xt(t, e, n) {
827
- return t?.style ? (P(n) && (e.duration = e.duration || 1), t.style(e)) : [];
937
+ function Ht(t, e, n) {
938
+ return t?.style ? (C(n) && (e.duration = e.duration || 1), t.style(e)) : [];
828
939
  }
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) : {};
940
+ function Qt(t, e, n, o) {
941
+ const i = O(e), s = Ht(i, e), a = J(s, n, e.effectId, !0), r = n?.trigger === "view-progress";
942
+ return a.map((f, d) => {
943
+ const { start: c, end: u } = r ? K(f.effect) : {};
833
944
  return {
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}`,
841
- animationTimeline: c ? `--${n?.id}` : "",
842
- animationRange: l || a ? `${l} ${a}` : ""
945
+ target: jt(t, f.part),
946
+ animation: Wt(f, r, o),
947
+ composition: f.options.composite,
948
+ custom: f.effect.custom,
949
+ name: f.effect.name,
950
+ keyframes: f.effect.keyframes,
951
+ id: f.id && `${f.id}-${d + 1}`,
952
+ animationTimeline: r ? `--${n?.id}` : "",
953
+ animationRange: c || u ? `${c} ${u}` : ""
843
954
  };
844
955
  });
845
956
  }
846
- function Mt(t, e, n) {
847
- const i = A(e), s = t instanceof HTMLElement ? t : w(t);
848
- if (i && i.prepare && s) {
849
- const r = { measure: L(s), mutate: W(s) };
850
- i.prepare(e, r);
957
+ function Bt(t, e, n) {
958
+ const o = O(e), i = t instanceof HTMLElement ? t : I(t);
959
+ if (o && o.prepare && i) {
960
+ const s = { measure: V(i), mutate: X(i) };
961
+ o.prepare(e, s);
851
962
  }
852
- n && E.mutate(n);
963
+ n && w.mutate(n);
853
964
  }
854
- function Gt(t, e) {
855
- const n = A(e);
965
+ function Kt(t, e) {
966
+ const n = O(e);
856
967
  if (!n)
857
968
  return null;
858
969
  if (!n.style)
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 = [];
861
- return i.forEach((m) => {
862
- c.includes(m) && o.push(
863
- r?.find((l) => l.animationName === m)
970
+ return e.effectId && t ? Vt(t, e.effectId) : null;
971
+ const o = n.getNames(e), s = (typeof t == "string" ? I(t) : t)?.getAnimations(), a = s?.map((f) => f.animationName) || [], r = [];
972
+ return o.forEach((f) => {
973
+ a.includes(f) && r.push(
974
+ s?.find((d) => d.animationName === f)
864
975
  );
865
- }), o?.length ? new O(o) : null;
976
+ }), r?.length ? new _(r) : null;
866
977
  }
867
- function Rt(t, e) {
868
- const i = (typeof t == "string" ? w(t) : t)?.getAnimations().filter((s) => {
869
- const r = s.id || s.animationName;
870
- return r ? r.startsWith(e) : !0;
978
+ function Vt(t, e) {
979
+ const o = (typeof t == "string" ? I(t) : t)?.getAnimations().filter((i) => {
980
+ const s = i.id || i.animationName;
981
+ return s ? s.startsWith(e) : !0;
871
982
  });
872
- return i?.length ? new O(i) : null;
983
+ return o?.length ? new _(o) : null;
873
984
  }
874
- function Vt(t, e, n, i = {}) {
875
- const { disabled: s, allowActiveEvent: r, ...c } = i, o = K(t, e, n, c);
876
- if (!o)
985
+ function te(t, e, n, o = {}) {
986
+ const { disabled: i, allowActiveEvent: s, ...a } = o, r = U(t, e, n, a);
987
+ if (!r)
877
988
  return null;
878
- let m = {};
989
+ let f = {};
879
990
  if (n.trigger === "view-progress" && !window.ViewTimeline) {
880
- const l = n.element || w(n.componentId), { ready: a } = o;
881
- return o.animations.map((u) => ({
991
+ const d = n.element || I(n.componentId), { ready: c } = r;
992
+ return r.animations.map((u) => ({
882
993
  /* we use getters for start and end in order to access the animation's start and end
883
994
  only when initializing the scrub scene rather than immediately */
884
995
  get start() {
@@ -887,140 +998,144 @@ function Vt(t, e, n, i = {}) {
887
998
  get end() {
888
999
  return u.end;
889
1000
  },
890
- viewSource: l,
891
- ready: a,
1001
+ viewSource: d,
1002
+ ready: c,
892
1003
  getProgress() {
893
- return o.getProgress();
1004
+ return r.getProgress();
894
1005
  },
895
- effect(f, p) {
896
- const { activeDuration: h } = u.effect.getComputedTiming(), { delay: d } = u.effect.getTiming();
897
- u.currentTime = ((d || 0) + (h || 0)) * p;
1006
+ effect(m, p) {
1007
+ const { activeDuration: l } = u.effect.getComputedTiming(), { delay: h } = u.effect.getTiming();
1008
+ u.currentTime = ((h || 0) + (l || 0)) * p;
898
1009
  },
899
- disabled: s,
1010
+ disabled: i,
900
1011
  destroy() {
901
1012
  u.cancel();
902
1013
  }
903
1014
  }));
904
1015
  } else if (n.trigger === "pointer-move") {
905
- const l = e, { centeredToTarget: a, transitionDuration: u, transitionEasing: f } = l, p = n.axis;
906
- if (l.keyframeEffect) {
907
- const h = o;
908
- return h.animations?.length === 0 ? null : {
1016
+ const d = e, { centeredToTarget: c, transitionDuration: u, transitionEasing: m } = d, p = n.axis;
1017
+ if (d.keyframeEffect) {
1018
+ const l = r;
1019
+ return l.animations?.length === 0 ? null : {
909
1020
  target: void 0,
910
- centeredToTarget: a,
911
- ready: h.ready,
1021
+ centeredToTarget: c,
1022
+ ready: l.ready,
912
1023
  _currentProgress: 0,
913
1024
  getProgress() {
914
1025
  return this._currentProgress;
915
1026
  },
916
- effect(v, g) {
1027
+ effect($, g) {
917
1028
  const y = p === "x" ? g.x : g.y;
918
- this._currentProgress = y, h.progress(y);
1029
+ this._currentProgress = y, l.progress(y);
919
1030
  },
920
- disabled: s ?? !1,
1031
+ disabled: i ?? !1,
921
1032
  destroy() {
922
- h.cancel();
1033
+ l.cancel();
923
1034
  }
924
1035
  };
925
1036
  }
926
- m = {
927
- centeredToTarget: a,
928
- allowActiveEvent: r
929
- }, e.customEffect && u && (m.transitionDuration = u, m.transitionEasing = D(f)), m.target = o.target;
1037
+ f = {
1038
+ centeredToTarget: c,
1039
+ allowActiveEvent: s
1040
+ }, e.customEffect && u && (f.transitionDuration = u, f.transitionEasing = B(m)), f.target = r.target;
930
1041
  }
931
1042
  return {
932
- ...m,
1043
+ ...f,
933
1044
  getProgress() {
934
- return o.getProgress();
1045
+ return r.getProgress();
935
1046
  },
936
- effect(l, a, u, f) {
937
- o.progress(
1047
+ effect(d, c, u, m) {
1048
+ r.progress(
938
1049
  u ? {
939
1050
  // @ts-expect-error spread error on p
940
- ...a,
1051
+ ...c,
941
1052
  v: u,
942
- active: f
943
- } : a
1053
+ active: m
1054
+ } : c
944
1055
  );
945
1056
  },
946
- disabled: s,
1057
+ disabled: i,
947
1058
  destroy() {
948
- o.cancel();
1059
+ r.cancel();
949
1060
  }
950
1061
  };
951
1062
  }
952
- function Dt(t, e, n, i = !1) {
953
- const s = Gt(t, e);
954
- return s ? (s.ready = new Promise((r) => {
955
- Mt(t, e, r);
956
- }), s) : K(t, e, n, { reducedMotion: i });
1063
+ function Xt(t, e, n, o = !1) {
1064
+ const i = Kt(t, e);
1065
+ return i ? (i.ready = new Promise((s) => {
1066
+ Bt(t, e, s);
1067
+ }), i) : U(t, e, n, { reducedMotion: o });
957
1068
  }
958
- function jt(t) {
1069
+ function Jt(t) {
959
1070
  return t === null ? [null] : typeof t == "string" ? Array.from(document.querySelectorAll(t)) : Array.isArray(t) ? t : [t];
960
1071
  }
961
- function Lt(t, e) {
1072
+ function Ut(t, e) {
962
1073
  const n = [];
963
- for (const { target: i, options: s } of t) {
964
- const r = jt(i);
965
- for (const c of r) {
966
- const o = Dt(
967
- c,
968
- s,
1074
+ for (const { target: o, options: i } of t) {
1075
+ const s = Jt(o);
1076
+ for (const a of s) {
1077
+ const r = Xt(
1078
+ a,
1079
+ i,
969
1080
  void 0,
970
1081
  e?.reducedMotion
971
1082
  );
972
- o instanceof O && n.push(o);
1083
+ r instanceof _ && n.push(r);
973
1084
  }
974
1085
  }
975
1086
  return n;
976
1087
  }
977
- function Bt(t, e, n) {
978
- const i = Lt(e, n);
979
- return new Tt(i, t);
1088
+ function ee(t, e, n) {
1089
+ const o = Ut(e, n);
1090
+ return new zt(o, t);
980
1091
  }
981
1092
  export {
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,
992
- Q as cubicOut,
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,
1002
- D as getJsEasing,
1003
- Vt as getScrubScene,
1004
- Bt as getSequence,
1005
- K as getWebAnimation,
1093
+ yt as backIn,
1094
+ vt as backInOut,
1095
+ bt as backOut,
1096
+ pt as circIn,
1097
+ $t as circInOut,
1098
+ gt as circOut,
1099
+ Ut as createAnimationGroups,
1100
+ N as cssEasings,
1101
+ E as cubicBezierCalc,
1102
+ Tt as cubicBezierEasing,
1103
+ it as cubicIn,
1104
+ ot as cubicInOut,
1105
+ st as cubicOut,
1106
+ lt as expoIn,
1107
+ ht as expoInOut,
1108
+ dt as expoOut,
1109
+ Xt as getAnimation,
1110
+ Qt as getCSSAnimation,
1111
+ wt as getCssUnits,
1112
+ qt as getEasing,
1113
+ Vt as getElementAnimation,
1114
+ Kt as getElementCSSAnimation,
1115
+ B as getJsEasing,
1116
+ xt as getJsEasingInCSS,
1117
+ te as getScrubScene,
1118
+ ee as getSequence,
1119
+ U as getWebAnimation,
1006
1120
  z as jsEasings,
1007
- G as linear,
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,
1020
- V as sineIn,
1021
- X as sineInOut,
1022
- B as sineOut,
1023
- Wt as toCSSPropertyName,
1024
- vt as toWAAPIPropertyName
1121
+ M as jsEasingsInCSS,
1122
+ L as linear,
1123
+ At as normalizeKeyframes,
1124
+ Bt as prepareAnimation,
1125
+ tt as quadIn,
1126
+ nt as quadInOut,
1127
+ et as quadOut,
1128
+ rt as quartIn,
1129
+ ct as quartInOut,
1130
+ at as quartOut,
1131
+ ut as quintIn,
1132
+ mt as quintInOut,
1133
+ ft as quintOut,
1134
+ Zt as registerEffects,
1135
+ Y as sineIn,
1136
+ Q as sineInOut,
1137
+ Z as sineOut,
1138
+ Yt as toCSSPropertyName,
1139
+ Ot as toWAAPIPropertyName
1025
1140
  };
1026
1141
  //# sourceMappingURL=motion.js.map