@wix/motion 2.1.3 → 2.1.4

package/dist/es/motion.js

@@ -3,11 +3,18 @@ class I {
   options;
   ready;
   isCSS;
+  longestAnimation;
   constructor(e, n) {
-    this.animations = e, this.options = n, this.ready = n?.measured || Promise.resolve(), this.isCSS = e[0] instanceof CSSAnimation;
+    this.animations = e, this.options = n, this.ready = n?.measured || Promise.resolve(), this.isCSS = e[0] instanceof CSSAnimation, this.longestAnimation = this._getAnimationWithLongestEndTime();
+  }
+  _getAnimationWithLongestEndTime() {
+    return this.animations.reduce((e, n) => {
+      const i = e.effect?.getComputedTiming().endTime ?? 0, r = n.effect?.getComputedTiming().endTime ?? 0;
+      return i > r ? e : n;
+    }, this.animations[0]);
   }
   getProgress() {
-    return this.animations[0]?.effect?.getComputedTiming().progress || 0;
+    return this.longestAnimation?.effect?.getComputedTiming().progress || 0;
   }
   async play(e) {
     await this.ready;
@@ -89,9 +96,9 @@ class I {
     });
   }
 }
-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), 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, z = {
+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 = {
   linear: G,
-  sineIn: W,
+  sineIn: V,
   sineOut: B,
   sineInOut: K,
   quadIn: X,
@@ -115,7 +122,7 @@ const G = (t) => t, W = (t) => 1 - Math.cos(t * Math.PI / 2), B = (t) => Math.si
   backIn: lt,
   backOut: ht,
   backInOut: dt
-}, C = {
+}, z = {
   linear: "linear",
   ease: "ease",
   easeIn: "ease-in",
@@ -150,7 +157,7 @@ function pt(t) {
   return t === "percentage" ? "%" : t || "px";
 }
 function gt(t) {
-  return t ? C[t] || t : C.linear;
+  return t ? z[t] || t : z.linear;
 }
 function yt(t, e, n, i) {
   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;
@@ -232,8 +239,8 @@ function vt(t) {
 }
 function D(t) {
   if (!t) return;
-  const e = z[t];
-  return e || (bt(t) ?? vt(t) ?? z.linear);
+  const e = C[t];
+  return e || (bt(t) ?? vt(t) ?? C.linear);
 }
 class Et extends I {
   animationGroups;
@@ -615,18 +622,18 @@ function At(t) {
 function w(t, e) {
   return t ? (e || document).getElementById(t) : null;
 }
-function kt(t, e) {
+function Tt(t, e) {
   return t?.matches(`[data-motion-part~="${e}"]`) ? t : t?.querySelector(`[data-motion-part~="${e}"]`);
 }
-function Tt(t) {
+function kt(t) {
   const e = t.alternate ? "alternate" : "";
   return t.reversed ? `${e ? `${e}-` : ""}reverse` : e || "normal";
 }
-function T(t) {
+function k(t) {
   return `${t.value}${pt(t.unit)}`;
 }
 function M(t, e, n) {
-  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)}`;
+  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)}`;
 }
 function R(t) {
   return {
@@ -664,7 +671,7 @@ function H(t, e, n) {
       easing: gt(i.easing),
       iterations: i.iterations === 0 ? 1 / 0 : i.iterations || 1,
       composite: i.composite,
-      direction: Tt(i)
+      direction: kt(i)
     };
     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), {
       effect: i,
@@ -689,7 +696,7 @@ function N(t, e, n, i, r) {
   }
   return [];
 }
-function V(t, e, n, i, r) {
+function W(t, e, n, i, r) {
   const s = t instanceof HTMLElement ? t : w(t, r);
   if (n?.trigger === "pointer-move" && !e.keyframeEffect) {
     let f = e;
@@ -724,7 +731,7 @@ function V(t, e, n, i, r) {
     subject: n.element || w(n.componentId)
   }));
   const c = m.map(({ effect: f, options: p, id: h, part: d }) => {
-    const v = d ? kt(s, d) : s, g = new KeyframeEffect(v || null, [], p);
+    const v = d ? Tt(s, d) : s, g = new KeyframeEffect(v || null, [], p);
     E.mutate(() => {
       "timing" in f && g.updateTiming(f.timing), g.setKeyframes(f.keyframes);
     });
@@ -737,13 +744,13 @@ function V(t, e, n, i, r) {
     if (o)
       if (l)
         E.mutate(() => {
-          const { start: _, end: k } = R(f);
-          b.rangeStart = _, b.rangeEnd = k, b.play();
+          const { start: _, end: T } = R(f);
+          b.rangeStart = _, b.rangeEnd = T, b.play();
         });
       else {
-        const { startOffset: _, endOffset: k } = e;
+        const { startOffset: _, endOffset: T } = e;
         E.mutate(() => {
-          const q = f.startOffset || _, P = f.endOffset || k;
+          const q = f.startOffset || _, P = f.endOffset || T;
           Object.assign(b, {
             start: {
               name: q.name,
@@ -802,12 +809,12 @@ function Pt(t, e, n) {
   }
   n && E.mutate(n);
 }
-function zt(t, e) {
+function Ct(t, e) {
   const n = O(e);
   if (!n)
     return null;
   if (!n.style)
-    return e.effectId && t ? Ct(t, e.effectId) : null;
+    return e.effectId && t ? zt(t, e.effectId) : null;
   const i = n.getNames(e), s = (typeof t == "string" ? w(t) : t)?.getAnimations(), u = s?.map((m) => m.animationName) || [], a = [];
   return i.forEach((m) => {
     u.includes(m) && a.push(
@@ -815,7 +822,7 @@ function zt(t, e) {
     );
   }), a?.length ? new I(a) : null;
 }
-function Ct(t, e) {
+function zt(t, e) {
   const i = (typeof t == "string" ? w(t) : t)?.getAnimations().filter((r) => {
     const s = r.id || r.animationName;
     return s ? s.startsWith(e) : !0;
@@ -823,7 +830,7 @@ function Ct(t, e) {
   return i?.length ? new I(i) : null;
 }
 function Dt(t, e, n, i = {}) {
-  const { disabled: r, allowActiveEvent: s, ...u } = i, a = V(t, e, n, u);
+  const { disabled: r, allowActiveEvent: s, ...u } = i, a = W(t, e, n, u);
   if (!a)
     return null;
   let m = {};
@@ -901,10 +908,10 @@ function Dt(t, e, n, i = {}) {
   };
 }
 function Ft(t, e, n, i = !1) {
-  const r = zt(t, e);
+  const r = Ct(t, e);
   return r ? (r.ready = new Promise((s) => {
     Pt(t, e, s);
-  }), r) : V(t, e, n, { reducedMotion: i });
+  }), r) : W(t, e, n, { reducedMotion: i });
 }
 function xt(t) {
   return t === null ? [null] : typeof t == "string" ? Array.from(document.querySelectorAll(t)) : Array.isArray(t) ? t : [t];
@@ -937,7 +944,7 @@ export {
   mt as circInOut,
   ft as circOut,
   Mt as createAnimationGroups,
-  C as cssEasings,
+  z as cssEasings,
   Y as cubicIn,
   Z as cubicInOut,
   Q as cubicOut,
@@ -948,13 +955,13 @@ export {
   Gt as getCSSAnimation,
   pt as getCssUnits,
   gt as getEasing,
-  Ct as getElementAnimation,
-  zt as getElementCSSAnimation,
+  zt as getElementAnimation,
+  Ct as getElementCSSAnimation,
   D as getJsEasing,
   Dt as getScrubScene,
   Rt as getSequence,
-  V as getWebAnimation,
-  z as jsEasings,
+  W as getWebAnimation,
+  C as jsEasings,
   G as linear,
   Pt as prepareAnimation,
   X as quadIn,
@@ -967,7 +974,7 @@ export {
   rt as quintInOut,
   st as quintOut,
   Nt as registerEffects,
-  W as sineIn,
+  V as sineIn,
   K as sineInOut,
   B as sineOut
 };